vuex的Mutation怎么使用

这篇“Vuex的Mutation怎么使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vuex的Mutation怎么使用”文章吧。

Vuex - Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation. 这是官方文档的原文. 不要通过其他方式去修改store中的状态, 这点非常关键, 那样做会使状态不收我们管控的.

在stroe中定义一个mutation, 作用是将count++.

mutations:{

addCount(state){

state.count++;

}

},

mutation的第一个参数是state, 通过他我们能拿到state中定义的状态.

在组件内调用定义的mutation(路由1). 通过this.$store.commit("addCount")触发store中的addCount, 从而改变count的值. 这样在其他页面引用的count都会跟着改变.

methods:{

    filterAgeGt18(arr){

        return arr.filter((ele, ind) => {

            return ele.age > 18;

        });

    },

    addCountInR1(){

        this.$store.commit("addCount");

    }

}

给mutation传参, 在改变store中的状态时, 可能需要传递进参数. 再定义一个mutation:addCountWithParams, 实现将count的值与传递的参数相加.

mutations:{

addCount(state){

state.count++;

},

addCountWithParams(state, params){

state.count += params;

},

pushDataToArrat(state){

state.array.push({

name:"sunq",

age:100

})

}

},

组件内传递参数调用(路由2.1).

methods:{

    addLocalCount(){

        this.localCount++;

    },

    addCount(){

        this.$store.commit("addCountWithParams", Math.ceil(Math.random() * 20));

    }

},

传入一个随机的1-20的整数, 与count相加.

官方推荐传递一个对象参数, 实践中也确实这样, 避免了对参数个数的控制, 而且这样更能和mutation的对象方式的提交组合使用, 写法更简洁.

再定义一个mutation, 传递一个对象参数.

mutations:{

addCount(state){

state.count++;

},

addCountWithParams(state, params){

state.count += params;

},

addCountWithObjParams(state, params){

state.count += params.num;

}

},

在组件中使用对象的方式调用addCountWithObjParams(路由3).

methods:{

    addCount(){

        //普通方式提交

        this.$store.commit("addCountWithObjParams", {

            num: Math.ceil(Math.random() * 10)

        });

        //对象方式提交

        this.$store.commit({

            type: "addCountWithObjParams",

            num: Math.ceil(Math.random() * 10)

        });

    }

},

上面代码提交了两次, 分别使用普通方式提交和对象风格提交addCountWithObjParams.

Mutation 需遵守 Vue 的响应规则, 所以需要注意两点,

mutation改变的变量需先在state中声明好,

对于对象属性的增加, 不能使用普通方式, 如 o1.k1 = 12; 这样的增加属性虽然可以实现效果, 但是vue的响应式是检测不到的, 那么关于此对象的双向数据就不会触发.

举个栗子.

state中增加一个对象aObject.

state:{

count:13,

anotherCount:17,

aObject:{

a:147

}

},

组件内获得对象, 并使用v-for将所有键值对渲染(路由3).

使用mapState获得:

computed:mapState(["anotherCount","count", "aObject"])

页面渲染:

<ul>

    <li v-for="(v,k) in aObject">store中的对象aObject的{{k}}的值 : {{v}}</li> 

</ul>

增加一个mutation, 给对象新增一个属性.

mutations:{

addCount(state){

state.count++;

},

addCountWithParams(state, params){

state.count += params;

},

addCountWithObjParams(state, params){

state.count += params.num;

},

changeAvalue(state){

state.aObject.b = 149;

console.log(state.aObject);

}

},

组件内commit这个mutation(路由3).

changeA(){

    this.$store.commit({

        type: "changeAvalue"

    });

}

效果是控制台打印的对象已经有b这个属性了, 但是页面的渲染却没有变化.

正确的姿势应该是用Vue提供的set方法.修改changAvalue这个mutation. Vue.set()

changeAvalue(state){

// state.aObject.b = 149;

Vue.set(state.aObject, "b", 149);

console.log(state.aObject);

},

再次执行提交mutation的操作页面的列表渲染会跟着更新.

辅助函数的使用. mapMutations (路由4).

和state, getter一样, mutatin也有一个辅助函数. 回顾一下上面的逻辑, 我们在点击事件的事件处理函数中提交mutation, 那为什么不直接将mutation作为点击事件的事件处理函数呢, 这样不就少了一层函数的嵌套. mapMutations就可以实现这点.

mapMutations可以将mutation映射到组件内的methods中, 同mapGetters一样, 可以传递数组, 将mutation映射到组件内的同名method上, 也可以传递对象, 给mutation起一个组件内的别名.

methods:{

    ...mapMutations([

      'addCount',

    ]),

    ...mapMutations({

      add: 'addCount'

    })

},

这样可将addCount和add直接赋给按钮的点击事件, 即可实现将count加1的操作.

<div>

    <h3>mutation的辅助函数的使用</h3>

    <div>

        <button @click="addCount">增加Count</button>

        <button @click="add">还是增加Count</button>

    </div>

    <div>

        <span class="count">count的值 : {{count}}</span>

    </div>

</div>

mutation所做的操作都是同步的, mutation不能进行异步的操作state中的变量,

以上就是关于“vuex的Mutation怎么使用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网VUE频道。