如果你看不懂vuex的官方教程，那就对了，因为他们写的不够平民化，而且用了很多术语来迷惑对手，来看看我翻译的平民版教程吧。
问：VUEX有什么用？
答：管理全局变量和相关的全局方法。当你需要子子通信的时候就知道了，如果一层一层的传值一定会把你烦死，所以你需要一个公用的全局对象去管理一些全局的变量和方法。
vuex就是eventbus(vue2.0之后改名叫store模式了)的升级版。jquery时代和backbone时代可以使用观察者模式实现,也有人使用nodejs里面提取的EventEmitter.js来实现“状态管理”，不过那时候还没有“状态管理”这么高大尚的词，我们都叫事件管理或者事件模型。
store 模式
这是一个精简版的vuex
// 定义全局对象 store
var store = {
debug: true,
state: {
message: 'Hello!'
},
setMessageAction (newValue) {
if(this.debug) console.log(’setMess',newValue)
this.state.message = newValue
},
clearMessageAction () {
if(this.debug) console.log(’clearMess')
this.state.message = ''
}
}
// 组件里面声明好那些属性是私有的哪些是公共的
var vmA = new Vue({
data: {
privateState: {},
sharedState: store.state
}
})
var vmB = new Vue({
data: {
privateState: {},
sharedState: store.state
}
})
store内所有state值变化的操作方法都要放到store对象自身的方法里面去实现。然后再用一个log来记录每次操作。这样控制台里面就能看到所有与state变化的相关操作记录了。
基于上面的简单store模式，继续延伸约定。你不应该在各自的子组件里面直接修改store内的state里面的值。应该定义一个全局的公共对象来执行action来分发事件通知store去改变才行，这才是flux架构。
flux架构的好处是不仅能够管理store中state改变的记录。还能记录变更、保存状态快照、历史回滚/时间旅行。如果不理解这些概念就往下面看看vuex的思想吧
1. State
单一状态树 —— 只用1个对象来保存所有数据源，这样每个应用就只可以有1个store对象。相当于以前的全局对象。
1.1 在vue组件中获得vuex状态
其实跟读取data中的数据一样，使用computed方法，把store里面的属性返回出来
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return store.state.count
}
}
}
1.2 mapState 辅助函数
当需要读取store对象内多个属性的时候，如果写多个computed方法是不是太麻烦，而且代码冗余，mapState就是为了解决这个问题
computed: mapState({
// 箭头函数可使代码更简练
count: state => state.count,
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
// 计算属性的名称与 state 的子节点名称相同时
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])
// 对象展开运算符
computed: {
localComputed () { /* ... */ },
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
// ...
})
}
2. Getter
store中的state只是保存固定的单一数据就相当于vue组件里的data属性一样。那么getter就相当于vue组件里的computed。
下面代码中的state换成data, getters换成computed是不是就理解了
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
2.1 调用方式
// 通过属性访问
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
// 通过方法访问
// 通过让 getter 返回一个函数，来实现给 getter 传参
getters: {
// ...
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
store.getters.getTodoById(2)
2.2 mapGetters 辅助函数
跟mapState类似
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
3. Mutation
3.1 mutation更改store中state属性值的唯一方法,把mutation换成setStates是不是就好理解了
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})
但是mutation毕竟不是setState，根据约定，你不可以直接调用mutation内声明的方法，因为mutation只负责注册事件。那么如何触发它定义的事件呢？这样：
store.commit('increment’) //把commit换成trigger是不是更好理解
3.2 提交载荷(Payload)
触发事件方法的参数你就说参数，非要起个难理解的名词来显示自己很高大上？
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
// 注意payload参数要用对象的形式，因为人家这么约定的
store.commit('increment', {
amount: 10
})
// 另外一种写法
store.commit({
type: 'increment',
amount: 10
})
3.3 Mutation 必须是同步函数，里面不要出现异步操作，因为异步操作你就不知道每个方法执行的顺序了。
3.4 在子组件中提交Mutation
你可以直接在方法里面使用this.$store.commit(‘xxx’)或者使用mapMutations辅助函数，跟上面那两个辅助函数类似，这样写：
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
// `mapMutations` 也支持载荷：
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
})
}
}
4. Action
上面说到Mutation必须要使用同步函数，那么Action就是来解决你想使用异步函数的这个事情。先看一下Action 怎么写：
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) { // 注意context这个参数有点不一样
context.commit('increment')
}
}
})
乍一看context是不是就等于store，最后介绍Moudles的时候你就知道区别了。实践中一般都是使用ES2015的参数解构方式简化代码：
actions: {
increment ({ commit }) {
commit('increment')
}
}
4.1 分发Action
store.dispatch('increment')
乍一看是不是跟mutations没什么区别，实际上真就没什么区别，atciont其实就是专门为了异步操作来设计的。如果你有异步的方法就写在action里面，如果是同步的就写在mutations里面，就这么简单，别想复杂了。
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
官网那个购物车示例如果看不懂，看一下这个平民版：
actions: {
checkout ({ commit, state }, products) {
const id = state.id
const savedCartItems = state.cart.items
$ajax.postProduct({
data:{
id,
products
}
}).then(res =>{
commit(types.CHECKOUT_REQUEST)
}).catch(res =>{
commit(types.CHECKOUT_FAILURE, savedCartItems)
})
}
}
5. Module
我们知道一个应用只允许使用一个store，这样做有个问题就是，当业务越来越复杂的时候，这个对象里面就会有N多的属性和方法，所以我们要把store拆成一个个的小份，然后根据业务去分类，以便维护。
Module其实就是为了让你的代码看起来更整洁的，如果业务没那么复杂不用也可以。
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
5.1 模块的局部状态
注意参数mutation和getter方法里面的第一个参数是模块的局部状体对象
const moduleA = {
state: { count: 0 },
mutations: {
increment (state) {
// 这里的 `state` 对象是模块的局部状态
state.count++
}
},
getters: {
doubleCount (state) {
return state.count * 2
}
}
}
根节点状态用context.rootState表示：
const moduleA = {
// …
getters: {
sumWithRootCount (state, getters, rootState) {
return state.count + rootState.count
}
},
actions: {
incrementIfOddOnRootSum ({ state, commit, rootState }) {
if ((state.count + rootState.count) % 2 === 1) {
commit('increment')
}
}
}
}