189 8069 5689
小编给大家分享一下如何使用vuejs2.0+vuex 2.0构建记事本应用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
开始吧
以下是 notes-vuex-app 的源文件目录：
在使用 vue 2 重写这个 app 之前，我在想能不能不改变文件目录结构以及配置位置呢？就是用比较生硬的方式重写，或者说单纯的语法修改。事实是可行的，否则我就不会写这篇文章了。然而面对的问题非常多，但却因此深入的理解了 vue 以及 vuex。大的问题是 webpack 的构建，如果使用 webpack 2.0+的话，坑比较多。本人是菜鸟，所以最终选择了 vue-cli 提供的两个 webpack 的模板，分别是 webpack-simple 和 webpack，我先使用 webpack-simple，它和原 app 的结构基本吻合。目录如下：
使用 vue-cli 生成基本目录之后，再安装 vuex2 。
main.js 的小改动
原示例 main.js 如下所示，但运行出错了，主要是 Vue 2 的根实例渲染稍有变化
import Vue from 'vue'
import store from './vuex/store'
import App from './components/App.vue'
new Vue({
store, // 注入到所有子组件
el: 'body',
components: { App }
})改正之后：
import Vue from 'vue'
import store from './vuex/store'
import App from './components/App.vue'
new Vue({
store, // inject store to all children
el: '#app',
template: '或者
import Vue from 'vue'
import store from './vuex/store'
import App from './components/App.vue'
new Vue({
store, // inject store to all children
el: '#app',
render: h => h(App)
})vuex 2 的变化
这个应用改写的主要问题集中在 vuex 2 的变化上，这些变化确实会让人感到凌乱，我无数次抓耳挠腮的骂娘。不过通过官方给出的示例也可以看出一些端倪。
首先是 action.js，只需注意一点，所有的 dispatch 都要改成 commit。
export const addNote = ({ commit }) => {
commit('ADD_NOTE')
}
export const editNote = ({ commit }, e) => {
commit('EDIT_NOTE', e.target.value)
}
export const deleteNote = ({ commit }) => {
commit('DELETE_NOTE')
}
export const updateActiveNote = ({ commit }, note) => {
commit('SET_ACTIVE_NOTE', note)
}
export const toggleFavorite = ({ commit }) => {
commit('TOGGLE_FAVORITE')
}store.js 变化也不大，但是要注意几个地方：
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
Vue.use(Vuex)
const state = {
notes: [],
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.splice(state.notes.indexOf(state.activeNote),1)
state.activeNote = state.notes[0] || {}
},
TOGGLE_FAVORITE (state) {
state.activeNote.favorite = !state.activeNote.favorite
},
SET_ACTIVE_NOTE (state, note) {
state.activeNote = note
}
}
const getters = {
notes: state => state.notes,
activeNote: state => state.activeNote,
activeNoteText: state => state.activeNote.text
}
export default new Vuex.Store({
state,
mutations,
actions,
getters
})原示例文件中没有将 getters 写到 store.js 中，而是直接在组件中定义的。为了更清晰，我仿照官方示例也提取出来写在了 store.js 中，这样在组件中调用时比较方便。其次也引入了 action.js，并作为 actions 对象传递给 Vuex.store()，这算是 vuex 的标准写法吧，对于后面在组件中调用比较有利。
其中要注意 DELETE_NOTE (state){} 这个方法，原示例使用了 vue1 提供的 remove 方法，但是 vue2 中去掉了这个方法。仔细想想就会明白，这个函数的作用就是删除 notes 数组中的元素。可以使用原生的 splice 方法。如果 JS 基础扎实的话，这里应该很好理解，没有什么大问题。其次相比原示例，添加一个删除后操作的判断。
我之前一直不太理解 flux 的概念，感觉像是新东西，完全不知道它的目的及作用。换成 Vuex，还是有点稀里糊涂。但是通过修改这个示例，基本算是开窍了。这些东西本身并没有玄机奥妙，想一想，如果我们不用框架，而是自己手写一个 todoMVC 时要怎么做？应该也是这样的思路，定义一个 notes 数组变量以及 activeNote 的变量。然后在创建一些改变状态的方法。我在面试中遇到过一个情况，面试官反复问我为什么需要使用框架，用 jQuery 不是也可以实现吗？这样说确实没错，用比较原始的方法当然可以做，只是代码结构会冗余或者凌乱，缺少小而美的特点。框架以及设计模式对代码做了整合封装，对于一个 CURD 应用比较友好，实现起来更方便更简单。我对于 Vuex 的理解就是，它是一个对象，封装了与状态相关的方法和属性。而所谓的状态就是点击、按键等操作之后的变化。
组件中使用 vuex
先看一下 Toolbar.vue 这个组件。修改后的代码如下：
