vuex入门篇 -- mutation和actio

之前我们专门介绍了vuex之中的状态部分，state和getter。vuex之中有一张过程图，展示的是vuex按照flux结构来管理我们的状态，用户通过dispatch或者commit来进行内容修改的提交，vuex将会自动的按照action -> mutation -> state的形式来进行内容的变更管理和记录。所以本篇文章我们将会介绍学习，vuex之中的变更函数这一块，mutation和action。

mutation

mutation之中操作的是一系列的同步函数，用于修改state之中的变量的状态的，当使用vuex的时候我们需要通过commit来进行提交我们需要操作的内容，然后vuex将会自动的依据类型来确定执行的操作，并将相关的参数传递给方法。

实际上这样的操作很像是事件的触发方式，commit就是那个触发事件的方法，而mutation就是事件类型，相关参数就是我们触发事件的时候需要传递的参数内容。

vuex在我们通过commit触发了mutation之后触发了哪些操作呢。先将参数整理就不说了，然后vuex会对于当前参数进行一定过筛。之后就是查询比对是否有注册了名为type的mutation，并将其放置在一个执行列表之中，设置 $commiting来确定提交状态，并开始执行mutation列表内容内容。执行完成之后修改回$commiting的状态，判断当前的环境是否是生产环境。如果不是，这将当前的执行内容记录下载。最后就执行完成了。

那么我们如何使用mutation呢，实际上也就是类似之前state之中的三种方式。

• this指针中的$store绝对的万能，同时也绝对的耦合。$store之中有commit方法。我们可以直接调用。传递的参数有 （type， params）, 其中的type表示的是mutation的名称，params可以是任意参数，最常用的当然还是对象了，type也可以和params结合成为一个对象内容哟，简化书写。当然了namespaced的影响还是在的，当模块状态管理对象设置了这一属性的话，commit之中传递的type需要填写的方式就变成了 模块名称/mutation名称 。如果没有设置的话则是直接填写名称就好。针对于重名问题，则完全是事件响应的作风了，将所有名称是这一类型的mutation提取出来，全部执行一遍。上代码了： store.js之中的mutations设置代码:

mutations: {
    changeAppName(state, params){
        state.appName = params();
    }
}

组建之中使用的代码：
methods: {
    //首个参数传递单个type值（字符串），第二个参数传递需要的数据。
    changeAppName() {
        this.$store.commit('changeAppName', function(){
            return 'new app';
        })
    }，
    
    //传递当个对象最为参数，此时需要在对象之中设置type属性表明需要调用的mutation的名称。
    changeUserName(){
        this.$store.commit({
            type:'changeUserName',
            userName: 'Arvin'
        })
    }
}
复制代码

• 然后就是使用mapMutations，同样的我们需要引入这一方法。然后再methods之中添加我们需要编写的内容，参数是两个（namespaced, ref），其中namespaced表示的是命名空间，ref传递的是数组或者对象。如果是对象的话，元素对应的方法传递的参数是commit方法。同样的模块状态管理对象中的mutation是受到namespaced属性设置的影响的，当设置了之后需要通过传递namespaced的值之后才能通过mapMutations获取到。如果没有的设置的话，实际上vuex将会把mutation注册到根状态管理对象下，所以可以获取的到的。我们来看一段示例代码吧：

传递的参数是对象：
methods: {
    ...mapMutations({
        changeAppName: (commit) => {
            commit("changeAppName", {
                appName: "new app"
            });
        }
    })
}

传递的参数是数组
methods: {
    ...mapMutations([
        "changeAppName",
        "changeUserName"
    ])
}

设置了namespaced之后获取的方式（例如设置了user模块）
methods: {
    ...mapMutations("user", [
        "changeAppName",
        "changeUserName"
    ])
}
复制代码

• 最后依旧是通过createNamespacedHelpers方法来获取模块状态管理对象之中的mutation，和之前state之中的形式类似，就不多做讲解了。

• 有一个特殊点需要注意的是，在mutation之中我们有的时候需要对state之中添加新的数据，我们需要通过vue.set来进行内容的添加，这样vuex才能顺利的保证对新增数据的监控。vue.set方法主要使用了

actions

和mutation实际上是类似的，值是action主要用于处理异步的操作，负责和后端进行交互内容，在flux之中action实际上是在mutation之前进行的异步操作，所以我们在结束了action操作之后需要再次的调用commit来进行内容的提交。

actions中的数据项方法的首个参数将会传递的是context（状态描述对象），其中拥有属性是vuex对象的简化内容。我们可以izai其中湖区到commit方法，getters，state等基础参数内容。在使用异步完成之后我们可以通过commit来直接调用mutation函数内容，完成变更。

dispatch方法来调用我们需要使用的action。其主要传递的是action的类型，vuex将会在action之中进行过滤，找出注册的所有的类型为type的方法，并使用promiseAll来进行异步的操作。

P.S.这里说明一下异步的过程，我们可以使用ES6之中的promise来进行异步操作同步化，同时可以是用async来对异步进行同步化。着一部分内容捡回在ES学习之中进行进行详细的说明，这里只是一个建议。

actions使用的方式实际上就和mutation差不多，连带着namespaced对其的影响都是相似的，我这边就直接上代码了，就不再一个个详细说明了。

store.js的设置代码：
import {getAppNameFromBackend, getUserNameFromBackend} from './xxx'
{
    ...   //省略其他设置的代码，然我们专心于actions吧。
    actions: {
        async getAppName(context){
            const { name } = await getAppNameFromBackend()
            context.commit("changeAppName", {
                appName: name
            })
        }
    }
},
modules:{
    user: {
        namespaced: true,
        ... 
        actions: {
            async getUserName(context) {
                const { name } = await getUserNameFromBackend()
                context.commit("changeUserName", {
                    userName: name
                })
            }
        }
    },
    users: {
        ...
        actions: {
            async getUserName(context) {
                ... 通user模块之中的方法
            }
        }
    }
}


this指针形式的引入
changeAppName() {
    this.$store.dispatch('getAppName');
},

changeUserNameForUser(){
    this.$store.dispatch('user/getUserName')
},

changeUserNameForUsers(){
    this.$store.dispatch('getUserName')
}

通过mapActions引入
...mapActions([
    'getAppName',
    'getUserName'
]),

...mapActions('user', [
    'getUserName'
]);

复制代码

结束

就到这里结束吧，如有任何错误或者不通顺指出，望能帮忙指出，让我们共同学习共同成长，再见。