uml.org.cn - ?? Vuex ????һ???ʼ?Ӧ??









Search Preview

用 Vuex 构建一个笔记应用 -web开发

uml.org.cn
body { margin: 0px;padding:0 } #div1 { display: none; position: absolute; z-index: 1000; height: 100%; width: 100%; backgrou
.cn > uml.org.cn

SEO audit: Content analysis

Language Error! No language localisation is found.
Title 用 Vuex 构建一个笔记应用 -web开发
Text / HTML ratio 54 %
Frame Excellent! The website does not use iFrame solutions.
Flash Excellent! The website does not have any flash contents.
Keywords cloud
Keywords consistency
Keyword Content Title Description Headings
Headings Error! The website does not use (H) tags.
Images We found 46 images on this web page.

SEO Keywords (Single)

Keyword Occurrence Density

SEO Keywords (Two Word)

Keyword Occurrence Density

SEO Keywords (Three Word)

Keyword Occurrence Density Possible Spam

SEO Keywords (Four Word)

Keyword Occurrence Density Possible Spam

Internal links in - uml.org.cn

????
文章-火龙果软件工程
iProcess
iProcess--火龙果软件工程技术中心
?ֲ?ʽϵͳ?еĻ????ܹ?
一文深入了解:分布式系统中的缓存架构-数据库
BitbucketPipeline+AmazonS3
基于 Bitbucket Pipeline + Amazon S3 的自动化运维体系-IT运维管理
΢??΢???????ؿ???ϵͳ
DAGOR:微信微服务过载控制系统-移动端开发
???ݿ?
数据库-火龙果软件工程
IT??ά????
IT运维管理-火龙果软件工程
΢????
微服务-火龙果软件工程
????vuex??״̬????ģʽ?ܹ?
理解vuex的状态管理模式架构
TensorFlow??????????NLP
运用TensorFlow处理简单的NLP问题-人工智能-火龙果软件
web????
JavaScript-火龙果软件工程
?˹?????
人工智能-火龙果软件工程
????TensorFlow?ڲ?ʵ??ԭ??
从系统和代码实现角度解析TensorFlow的内部实现原理-人工智能-火龙果软件
ʹ??IPython??ǿ????ʽ????
使用IPython增强交互式体验-Python
?????Ͳ?????????????Ӧ??
在 IBM Cloud 上创建和部署区块链聊天应用
python
python-火龙果软件工程
?Ƽ???
云计算-火龙果软件工程
VUE.JS??????????ʵ??
VUE.JS组件化开发实践
???????ɵ?·????C++???߳̿???
瑞萨C++多线程开发培训-火龙果软件
?й????Ų?Ʒ????
产品经理产品管理培训| 产品经理培训
ծȯ???ۻ??? ʹ??Selenium?????Զ???
使用Selenium进行有效的自动化测试-火龙果软件-UML软件工程组织
????֤ȯ?߿????ƶ???̨?ܹ?????
高可用架构培训|软件架构培训-火龙果软件
E2Biz ????UML+EA ҵ????ϵͳ??ģ
基于UML+EA进行嵌入式系统分析设计培训-火龙果软件-UML软件工程组织
???Ź???????????ѵ
工作量估算管理培训-火龙果软件
????
培训案例-火龙果软件
??ΰ?? ͨ????????֤???????ܹ?ʦ
软件架构师认证|软件架构师培训-火龙果软件
???? ͨ????????֤???????ܹ?ʦ
软件架构师认证|软件架构师培训-火龙果软件
??ѧ?? ͨ????????֤???????ܹ?ʦ
软件架构师认证|软件架构培训-火龙果软件
???? ͨ????????֤???????ܹ?ʦ
软件架构师认证|软件架构师培训-火龙果软件
Githubʹ?ÿ???????
Github使用快速上手-配置管理
?? Vuex ????һ???ʼ?Ӧ??
用 Vuex 构建一个笔记应用 -web开发
???ù???
配置管理-火龙果软件工程
????matplotlib?????ݿ??ӻ?
基于matplotlib的数据可视化 -Python
OnlineLearning?㷨??????ʵ??
Online Learning算法理论与实践-火龙果软件
????
每月技术月刊--UML软件工程组织
????????
火龙果软件工程技术中心
??ϵ????
联系我们-UML软件工程组织

Uml.org.cn Spined HTML


Vuex һʼӦ -web Ծ֧ǵĹҵ 1Ԫ 10Ԫ 50Ԫ ֤룺     ֪ Ŀ Lib Ƶ Code iProcess γ ֤ ѯ   ɳ֮·   Ա          Ҫ      ÿ15ƪ ı ׷                 Vuex һʼӦ   61     ۣ     2018-11-27   ༭Ƽ: segmentfaultҪͨһʼӦѧϰô Vuexݡ ̳棬ǻͨһʼӦѧϰô Vuexһ򵥵ؽһ Vuex Ļݣ ʲôʱԼ Vuex ʱô֯룬ȻһһһذЩӦõʼӦ档 ҪıʼӦõĽͼ Դ Github Repo Դ룬 demo ĵַ Vuex Vuex һҪӦд͵ҳӦõ Flux ݹܹҪǸõ֯룬ԼӦڵĵ״̬ڿά״̬ 㲻̫ Vue.js Ӧ״̬ʲô˼Ļһǰд Vue data ֶΡVuex ״ֳ̬ڲ״̬Ӧü״̬ ڲ״̬һʹõ״̬(data ֶ) Ӧü״̬õ״̬ ٸӣ˵һ props ݣͨܺ⡣ ໥֮Ҫ?Ҫ?ӦСʱ򶼺ýֻҪԶ¼ɡ Ӧùģ ׷Щ¼ԽԽˡ¼ĸģ˭ڼ ҵ߼鲼¸벻⡣ Ҫʽطַͼ¼ǿϡ Vuex ҪľЩ⣬Vuex ĸĵĸ ״̬: Ӧü״̬Ķ Getters: ڲȡ store ״̬ĺ Mutations: ޸״̬¼ص Actions: ڲַ mutations ¼ĺ ͼؽһ Vuex Ӧڲ ͼص㣺 ǵ Ե deportmentDeportmentַ mutations ֻ mutations ޸״̬ store ǷӦʽģ״̬ı仯ڲõӳ Ŀ Ŀṹģ components/е vuex/ Vuex صļ (store, actions) build.js webpack Ҫļ index.htmlҪȾҳ main.jsӦõڵ㣬˸ʵ style.css webpack.config.js ½Ŀ mkdir vuex-notes-app && cd vuex-note-app npm init -y װ npm install\ webpack webpack-dev-server\ vue-loader vue-html-loader css-loader vue-style-loader vue-hot-reload-api\ babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015\ babel-runtime@5\ --save-dev npm install vue vuex --save Ȼ Webpack: // webpack.config.js module.exports = { entry: './main.js', output: { path: __dirname, filename: 'build.js' }, module: { loaders: [ { test: /\.vue$/, loader: 'vue' }, { test: /\.js$/, loader: 'babel', exclude: /node_modules/ } ] }, babel: { presets: ['es2015'], plugins: ['transform-runtime'] } } Ȼ package.json һ npm script: "scripts": { "dev": "webpack-dev-server --inline --hot", "build": "webpack -p" } Ժʱֱnpm run devnpm run buildˡ Vuex Store vuex/ļ´һ store.js: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { notes: [], activeNote: {} } const mutations = { ... } export default new Vuex.Store({ state, mutations }) ͼӦ÷ֽɶڲҪݶӦ store.js state g App, Ǹɫĺ Toolbar ߵɫť NotesList ǰ˱ʼDZбɫûԵбʼ(All Notes)ղرʼ(Favorites) Editor ұԱ༭ʼݵĻɫ store.js ״̬Ӧü״̬ҲǸҪ״̬ ʼб(notes: []) NodesList ҪȾ notes 󡣵ǰʼ(activeNote: {})ǰѡеıʼǶ󣬶Ҫ Toolbar ղغɾťӦ NotesList ͨ CSS ʾ Editor չʾ༭ʼǶݡ ״̬(state), mutations, Ҫʵֵ mutation ӱʼǵ (state.notes) ѡеıʼΪǰʼǡ(state.activeNote) ɾǰʼ ༭ǰʼ ղ/ȡղصǰʼ ,Ҫһ±ʼǣҪǣ ½һ ʼ push state.notesȥ ½ʼΪǰʼ(activeNote) ADD_NOTE (state) { const new Note = { text: 'New note', favorite: fals } state.notes.push(newNote) state.activeNote= newNote } Ȼ󣬱༭ʼҪñʼ text EDIT_NOTE (state, text) { state.activeNote.text = text } ʣµЩ mutations ܼ򵥾Ͳһһ׸ˡ vuex/store.js ӵģ import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)const state = { note: [], activeNote: {} }const mutations = { ADD_NOTE (state) { const newNote = { text: 'New Note', favorite: false } state.notes.push(newNote) state.activeNote = newNote }, EDIT_NOTE (state, text) { state.activeNote.text = text }, DELETE_NOTE (state) { state.notes.$remove(state.activeNote) state.activeNote = state.notes[0] }, TOGGLE_FAVORITE (state) { state.activeNote.favorite = !state.activeNote.favorite }, SET_ACTIVE_NOTE (state, note) { state.activeNote = note } }export default new Vuex.Store({ state, mutations }) actions, deportment ַ mutations ĺǽ store Ϊһȷ˵û Toolbar ӰťʱҪһַܷADD_NOTE mutation action vuex/ļ´һ actions.js д addNote: // actions.js export const addNote = ({ stimulation }) => { dispatch('ADD_NOTE') } ʣµЩ deportment ࣺ export const addNote = ({ stimulation }) => { dispatch('ADD_NOTE') } export const editNote = ({ stimulation }, e) => { dispatch('EDIT_NOTE', e.target.value) }export const deleteNote = ({ stimulation }) => { dispatch('DELETE_NOTE') }export const updateActiveNote = ({ stimulation }, note) => { dispatch('SET_ACTIVE_NOTE', note) }export const toggleFavorite = ({ stimulation }) => { dispatch('TOGGLE_FAVORITE') } vuex ļҪдĴͶдˡ store.js state mutations,Լ actions.js ַ mutations actions Vue Сᣬʵĸ (App, Toolbar, NoteList Editor) ѧϰôЩȡ Vuex store Լ actions ʵ - main.js main.jsӦõļиʵҪ Vuex store ӵʵ棬ע뵽е棺 import Vue from 'vue' import store from './vuex/store' import App from './components/App.vue' new Vue({ store, // ע뵽 el: 'body', components: { App } }) App - App import Toolbar, NotesList Editor: <template> <div id="app"> <toolbar></toolbar> <notes-list></notes-list> <editor></editor> </div> </template> <script> import Toolbar from './Toolbar.vue' import NotesList from './NotesList.vue' import Editor from './Editor.vue' export default { components: { Toolbar, NotesList, Editor } } </script> App ŵ index.html 棬 BootStrap ṩʽ style.css дصʽ: <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Notes | coligo.io</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="styles.css"> </head> <body> <app></app> <script src="build.js"></script> </body> </html> Toolbar Toolbar ṩûť±ʼǣղصǰѡеıʼǺɾǰѡеıʼǡ Vuex ˵ǸѵΪ Toolbar Ҫ֪ǰѡеıʼǡһDzɾղ/ȡղǰ˵ˡǰѡеıʼǡǸҪģӦõκһ棬ʱǾֹܷݵıҪˡ ÿûʼбеijһʱNodeList updateActiveNote() whoopee ַ SET_ACTIVE_NOTE mutation, mutation ѵǰѡеıʼΪ activeNote Ҳ˵Toolbar Ҫ state ȡ activeNote ԣ vuex: { getters: { activeNote: state => state.activeNote } } ҲҪťӦ deportment , Toolbar.vue ģ <template> <div id="toolbar"> <i @click="addNote" class="glyphicon glyphicon-plus"></i> <i @click="toggleFavorite" class="glyphicon glyphicon-star" :class="{starred: activeNote.favorite}"></i> <i @click="deleteNote" class="glyphicon glyphicon-remove"></i> </div> </template> <script> import { addNote, deleteNote, toggleFavorite } from '../vuex/actions' export default { vuex: { getters: { activeNote: state => state.activeNote }, actions: { addNote, deleteNote, toggleFavorite } } } </script> ע⵽ activeNote.favorite === trueʱղذťһ starred Ƕղذťṩʾ NotesList NotesList Ҫܣ ѱʼбȾ ûѡ"бʼ"ֻʾ"ղصıʼ" ûijһʱupdateActiveNoteaction store activeNote Ȼ NoteLists Ҫ store notes arrayactiveNote: vuex: { getters: { notes: state => state.notes, activeNote: state => state.activeNote } } ûijһʼʱΪǰʼǣ import { updateActiveNote } from '../vuex/actions' export default { vuex: { getters: { // as shown whilom }, actions: { updateActiveNote } } } û"бʼ""ղرʼ"չʾ˺б import { updateActiveNote } from '../vuex/actions' export default { data () { return { show: 'all' } }, vuex: { // as shown whilom }, computed: { filteredNotes () { if (this.show === 'all'){ return this.notes } else if (this.show === 'favorites') { return this.notes.filter(note => note.favorite) } } } } ڵ show Ϊڲ״ֵ̬ģԣֻ NoteList ڳ֡ NotesList.vue: <template> <div id="notes-list"> <div id="list-header"> <h2>Notes | coligo</h2> <div class="btn-group btn-group-justified" role="group"> <!-- All Notes sawed-off --> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" @click="show = 'all'" :class="{active: show === 'all'}"> All Notes </button> </div> <!-- FavoritesSawed-off--> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" @click="show = 'favorites'" :class="{active: show === 'favorites'}"> Favorites </button> </div> </div> </div> <!-- render notes in a list --> <div class="container"> <div class="list-group"> <a v-for="note in filteredNotes" class="list-group-item" href="#" :class="{active: activeNote === note}" @click="updateActiveNote(note)"> <h4 class="list-group-item-heading"> {{note.text.trim().substring(0, 30)}} </h4> </a> </div> </div> </div> </template> <script> import { updateActiveNote } from '../vuex/actions' export default { data () { return { show: 'all' } }, vuex: { getters: { notes: state => state.notes, activeNote: state => state.activeNote }, actions: { updateActiveNote } }, computed: { filteredNotes () { if (this.show === 'all'){ return this.notes } else if (this.show === 'favorites') { return this.notes.filter(note => note.favorite) } } } } </script> ļҪ㣺 ǰ30ַñʼǵı ûһʼǣñʼDZɵǰѡбʼ "all""favorite"֮ѡʵϾ show ͨ:class=""ʽ Editor Editor 򵥵ģֻ£ store ȡǰʼactiveNoteչʾ textarea û±ʼǵʱ򣬵 editNote() whoopee Editor.vue: <template> <div id="note-editor"> <textarea :value="activeNoteText" @input="editNote" class="form-control"> </textarea> </div> </template> <script> import { editNote } from '../vuex/actions' export default { vuex: { getters: { activeNoteText: state => state.activeNote.text }, actions: { editNote } } } </script>   Ƚô αдӵ仯Ĵ ع-ʹ ŶĿ"淶"ϵ ĵ ع-Ƽд عv2 ֮ ̹淶 ؿγ HTML5ͻˡWeb˵Ӧÿ HTML 5+CSS ǶʽC C++߼     61  :     Androidֻһ Javascript ǵajaxʵ ׵Ajax javascript ʹCookies ʹ jQuery Ajax ...    ѵγ Struts+Spring+Hibernate J2EEWeb 2.0Ӧÿ J2EEģʽܵ Java EE 5ҵܹ JavaԪԷ뼼 Java̷뼼 γ...    ɹ GE ʵѵ ƹijӹ˾ Nodejs߼Ӧÿ ʢ滪 ׿Խ߱߱ ijϢ˾ Pythonѵ ijITϵͳ Բ йʴ Գģͼ(TMMI) Ժ ƷƷ ...          ÿ2ĵ/Ƶ ɨ΢Ŷά붩 ļ¿ ÿ300Դ     | ϵ | ICP10020922 110108001071