vue提交mutation_这是另一篇关于vuex的学习笔记 — Mutation

  • Post author:
  • Post category:vue


接上两篇, 这篇介绍Mutation的使用.

master分支为最终版本.

每个阶段的讲解都会创建一个分支.

init分支为初始化后配置完成路由的版本.

上两篇文章已经讲述了, 全局状态的声明, 组件内获取, 过滤等操作.

但还少一个经常使用的操作, 就是对状态值的修改. 我们不可能声明的变量, 只是为了查看而不去操作这个变量. 修改全局的状态才是状态管理的关键, 因为只有状态改变了, 才需要我们去管理. 这就是本篇文章要学习的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”])

页面渲染:

  • store中的对象aObject的{

    {k}}的值 : {

    {v}}

增加一个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的操作.

mutation的辅助函数的使用

增加Count

还是增加Count


count的值 : {

{count}}

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

异步操作state中的变量是下一篇Action所做的.

mutation的使用就到这里, 这一阶段的代码在mutation分支上, 可下载验证上述功能:

未完…. 还有 Action Module.



版权声明:本文为weixin_31967777原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。