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'
]);

复制代码

---

结束

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