vuex 使用文档小结篇(5)

日期：2020-05-11 栏目：程序人生 浏览：次

mutation 必须是同步函数

　　　　一条重要的原则是记住 mutation 必须是同步函数。　　　　　　　

　mutations: {
　　　　　　　　　　someMutation (state) {
　　　　　　　　　　　　api.callAsyncMethod(() => {
　　　　　　　　　　　　　　　　state.count++
　　　　　　　　　　　　})
　　　　　　　　　　}
　　　　　　　　}

 在组件中提交 Mutations

　　　　你可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使使用 mapMutations辅助函数将组建中的methods 映射为 store.commit 调用 (需要在根节点注入 store)　　　　

import {mapMutations} from 'vuex'
　　　　　　expor default {
　　　　　　　　methods: {
　　　　　　　　　　mapMutations([
　　　　　　　　　　　　　　methods: {
　　　　　　　　　　　　　　　　mapMutations([
　　　　　　　　　　　　　　　　　　'increment' // 映射 this.increment() 为 this.$store.commit('increment')
　　　　　　　　　　]),
　　　　　　　　mapMutations({
　　　　　　　　　　　　　　add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
　　　　　　　　　　})
　　　　　　　　}
　　　　　　])
　　　　　　}
　　　　}

Actions  

　　　　在mutation 中混异步调用会导致你的程序很难调试。

Actions

　　　　Action 类似于 mutation,不同在于。

　　　　Action 提交的是 mutation ,而不是直接变更状态。

　　　　Action 可以包含任意异步操作。

　　　　注册一个简单的 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 实例本身了。　　　

actions: {
　　　　　　increment({commit}){
　　　　　　　　commit('increment')
　　　　　　}
　　　　}

分发 Action

　　　　Action 通过 store.dispatch 方法触发：