初始化一个项目名为vue-notes-app的应用，并选择使用 webpack 打包方式。在命令行中按照提示选择初始化配置项。其中在选择 JSLint 校验的时候，推荐选择 AirBNB 规范。
使用你最喜欢的编辑器打开我们刚刚新建的项目，项目的结构大概如下图：
components/ 文件夹用来存放我们的 Vue 组件
vuex/ 文件夹存放的是和 Vuex store 相关的东西（state object，actions，mutators)
build/ 文件是 webpack 的打包编译配置文件
config/ 文件夹存放的是一些配置项，比如我们服务器访问的端口配置等
dist/ 该文件夹一开始是不存在，在我们的项目经过 build 之后才会产出
App.vue 根组件，所有的子组件都将在这里被引用
index.html 整个项目的入口文件，将会引用我们的根组件 App.vue
main.js 入口文件的 js 逻辑，在 webpack 打包之后将被注入到 index.html 中
功能模块
新增笔记，新增一篇笔记，编辑区显示空的笔记内容
删除笔记，删除一篇笔记之后，编辑区域显示当前笔记类别的第一项
笔记列表切换，分为全部笔记和收藏笔记两种，在切换之后，编辑区域显示当前列表的第一条笔记
收藏笔记，给当前激活的笔记打上收藏的标签
项目组件划分
在这个项目中，我们将总共使用四个组件：根组件 App.vue，操作栏组件 Toolbar.vue，别表组件 NotesList.vue，笔记编辑组件 Editor.vue。
创建 Vuex Store
按照上面我们列出来的功能模块，我们在 Vuex/ 下面建立一个 store.js 文件。
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); // 需要维护的状态 const state = { notes: [], activeNote: {}, show: '' }; const mutations = { // 初始化 state INIT_STORE(state, data) { state.notes = data.notes, state.show = data.show; state.activeNote = data.activeNote; }, // 新增笔记 NEW_NOTE(state) { var newNote = { id: +new Date(), title: '', content: '', favorite: false }; state.notes.push(newNote); state.activeNote = newNote; }, // 修改笔记 EDIT_NOTE(state, note) { state.activeNote = note; // 修改原始数据 for (var i = 0; i < state.notes.length; i++) { if(state.notes[i].id === note.id){ state.notes[i] = note; break; } }; }, // 删除笔记 DELETE_NOTE(state) { state.notes.$remove(state.activeNote); state.activeNote = state.notes[0] || {}; }, // 切换笔记的收藏与取消收藏 TOGGLE_FAVORITE(state) { state.activeNote.favorite = !state.activeNote.favorite; }, // 切换显示数据列表类型：全部 or 收藏 SET_SHOW_ALL(state, show){ state.show = show; // 切换数据展示，需要同步更新 activeNote if(show === 'favorite'){ state.activeNote = state.notes.filter(note => note.favorite)[0] || {}; }else{ state.activeNote = state.notes[0] || {}; } }, // 设置当前激活的笔记 SET_ACTIVE_NOTE(state, note) { state.activeNote = note; } }; export default new Vuex.Store({ state, mutations });
创建 Vuex Actions
在 Vuex/ 下面建立一个 action.js，用来给组件使用的函数。
function makeAction(type) { return ({ dispatch }, ...args) => dispatch(type, ...args); }; const initNote = { id: +new Date(), title: '我的笔记', content: '第一篇笔记内容', favorite: false }; // 模拟初始化数据 const initData = { show: 'all', notes: [initNote], activeNote: initNote }; export const initStore = ({ dispatch }) => { dispatch('INIT_STORE', initData); }; // 更新当前activeNote对象 export const updateActiveNote = makeAction('SET_ACTIVE_NOTE'); // 添加一个note对象 export const newNote = makeAction('NEW_NOTE'); // 删除一个note对象 export const deleteNote = makeAction('DELETE_NOTE'); export const toggleFavorite = makeAction('TOGGLE_FAVORITE'); export const editNote = makeAction('EDIT_NOTE'); // 更新列表展示 export const updateShow = makeAction('SET_SHOW_ALL'); 创建 Vuex Getters 在 vuex/ 下面建立一个 getter.js 文件，用来从 store 获取数据。 // 获取 noteList,这里将会根据 state.show 的状态做数据过滤 export const filteredNotes = (state) => { if(state.show === 'all'){ return state.notes || {}; }else if(state.show === 'favorite'){ return state.notes.filter(note => note.favorite) || {}; } }; // 获取列表展示状态 ： all or favorite export const show = (state) => { return state.show; }; // 获取当前激活 note export const activeNote = (state) => { return state.activeNote; };
以上就是我们 Vuex 的所有逻辑了，在定下了我们需要完成的功能之后，接下来就是只需要在组件中去调用 action 来实现对应的功能了。
路由配置
在这里我们将使用 vue-router 来做路由，引用 bootstrap 样式。
index.html