Vuex与全局变量的区别:
- vuex的状态是响应式的
- 不能直接改变store中的状态。改变状态的唯一途径就是显示的提交(commit) mutation
Vuex的几个核心概念
state
相当于 Vue 的 data
对象
- Vuex使用单一状态树。每个应用仅仅包含一个
store
实例。 - Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中(需调用 Vue.use(Vuex))
- 通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到
- 放入state中的属性最好是公用的,如果是某个组件私有的,则不建议放入
mapState
辅助函数
- mapState 返回一个对象,可以使用展开运算符混合到computed中
Getter
相当于 Vue 的 computed
对象
Vuex允许在store中定义getter。
- Getter接收state作为第一个参数
- Getter会暴露
store.getters
对象 - Getter也可以接收其他Getter作为第二个参数
- 可以在组件中使用
this.$store.getters.XXX
mapGetters
辅助函数
Mutation
- 更改Vuex store中状态的唯一方式是 提交 mutation
- 只能通过 store.commit(mutation)方法来调用mutation,而不能直接调用
mutation handler
- mutation 接收 state 作为第一个参数
- commit 的一个参数是 type (即方法名,事件类型),第二个参数是载荷(payload, 即额外参数,大多数情况下是个对象)
- 使用常量来代替mutation 的type(事件类型)
- mutation必须是同步函数
提交载荷(Payload)
可以像 store.commit中传入额外参数, 即 mutation
的载荷
store.commit('increment', 10)
increment (state, payload)
Action
- action 类似于 mutation, 但区别如下:
- mutation只处理同步事务
- action提交的是 mutation,而不是直接变更状态。
- action可以包含任意异步操作
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。但是 context对象并不是 store 实例本身
- Action 通过 store.dispatch 方法触发 mutation
- Store.dispatch 仍旧返回 promise
- 一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下,只有当所有触发函数完成后,返回的 Promise 才会执行