在我这里看来，vuex和全局变量的区别不大，主要区别：
1，【响应式】vuex的状态存储是响应式的，当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效更新。
2，【不能直接改变store】不能直接改变store的变化，改变store中状态的唯一途径是commit mutation。方便于跟踪每一个状态的变化。
使用的时候将Vuex注册在根组件下，这样下面的子组件都能使用，使用module将vuex分成各个模块来在不同的模块下使用，方便管理以及不太繁琐。
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 的状态
state
state在使用的时候如果vuex注册在根组件下，则直接在计算属性中通过this.$store.state.test来获得数据
mapState 辅助函数
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// 箭头函数可使代码更简练
count: state => state.count,
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
//不更改名字的情况 用数组 同位置替换
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])
因为mapState返回的是对象 需要与普通的计算属性一起使用，这时候就需要使用es6的对象展开运算符...来结合
computed: {
localComputed () { /* ... */ },
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
// ...
})
}
注：后面几个mapXXX差不多
Getter
Getter是有时候需要对state里面的数据进行处理，比如进行日期格式的转换、挑选特定的数据，查找、过滤等等
假如后端传给我们一个日期 几个组件都需要使用，这个时候在每个组件里面去过滤 实在是不方便，所以就在getter里面进行处理，一次处理，多个组件使用
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Getter 接受 state 作为其第一个参数：
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)
}
}
})
通过属性访问
则是this.$store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
Getter 也可以接受其他 getter 作为第二个参数：
通过方法访问
通过getter返回一个函数 这样使用的时候就调用这个函数来进行传参，可用于进行通过id查询
getters: {
// ...
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
this.$store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
mapGetters 辅助函数
多个比较繁琐，所以使用mapGetters将 store 中的 getter 映射到局部计算属性：
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
//更改名字就使用对象形式
...mapGetters({
// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})
Mutation
开篇就说过要想更改状态就必须通过commit mutation。
Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})
不能直接的触发 mutation handler比如这里的increment 必须使用commit 来触发
this.$store.commit("increment")
提交载荷（Payload）即给mutation传入额外的参数
mutations: {
increment (state, n) {
state.count += n
}
}
store.commit("increment", 5)
通常传入参数是一个对象
对象风格的提交方式
提交 mutation 的另一种方式是直接使用包含 type 属性的对象：
store.commit({
type: 'increment',
amount: 10
})
Mutation 需遵守 Vue 的响应规则
既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：
最好提前在你的 store 中初始化好所有所需属性。
当需要在对象上添加新属性时，你应该
1、使用 Vue.set(obj, 'newProp', 123), 或者
2、以新对象替换老对象
Mutation 必须是同步函数,所以才有了Action
在组件中提交 Mutation
你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。
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')`
})
}
}
Action
Action里面可以处理异步事务的
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。
因为在模块内部是的state是通过context来访问，即context.state,根节点的状态则为context.rootState来访问
实践中，我们会经常用到 ES2015 的 参数解构 来简化代码（特别是我们需要调用 commit 很多次的时候）：
actions: {
increment ({ commit }) {
commit('increment')
}
}
一般在组件里面使用this.$store.dispatch('increment')来触发Action里面的内容
可在action里面执行异步操作
actions: {
increment ({ commit }) {
setTimeout(function(){
commit('increment')
},1000)
}
}
传参可以使用两种方式来传参
// 以载荷形式分发
store.dispatch('incrementAsync', {
amount: 10
})
// 以对象形式分发
store.dispatch({
type: 'incrementAsync',
amount: 10
})
在组件中分发的时候可以使用mapAction来操作
你在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）：
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
// `mapActions` 也支持载荷：
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
})
}
}
dipatch的语法糖 相当于同时调用多个dispatch
action通常是异步的 会返回一个promise 这样就可调用then来进行调用回调函数了
store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise：
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
}
}
store.dispatch('actionA').then(() => {
// ...
})
在另一个action中也可以触发某个action
actions: {
// ...
actionB ({ dispatch, commit }) {
return dispatch('actionA').then(() => {
commit('someOtherMutation')
})
}
}
也可以使用sync和await
OK
