Vue --- Vuex中，mutation的概念理解

一、Vuex是什么，官网的说法是，vuex是一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

二、Vuex的五大核心概念之一mutation
mutation，更改Vuex的store中的状态的唯一方法是提交mutation。

最简单的案例可以去看我之前的一篇文章，就是数字加减的效果
https://blog.csdn.net/qq_21980517/article/details/103349069

也就是说，在mutation中写上自定义的方法，然后在组件的js中通过this.$store.commit("自定义的方法名")就可以更新store中的数据和状态

例1：传递多个参数，并且该参数的值是自定义的
可以先看下实现的效果，如下动态图

1、先看组件中的代码，可以看到点击事件addnum和subnum都带了参数5，并且都通过 this.$store.commit提交了mutations中的方法，并且可以看到都各自跟上了一个参数addcounter和subcounter

2、再看Vuex配置文件中的代码，可以看到都分别接收了传递进来的参数addcounter和subcounter，到此就完成了

// 方法
mutations:{
  // 加的方法
  increment(state,addcounter){
    state.counter += addcounter
  },
  // 减的方法
  decrement(state,subcounter){
    state.counter -= subcounter
  }
},

3、其中，传递参数还有另外一种形式
在Vuex配置文件中，可以看到payload参数，记住，这个参数，是用来接收其他地方传递进来的数据的，如果传递进来的只是一个值，那么就是一个参数，如果是多个参数，那就是一个对象

// 方法
mutations:{
  // 加的方法
  increment(state,payload){
    state.counter += payload.addcounter
  },
  // 减的方法
  decrement(state,payload){
    state.counter -= payload.subcounter
  },
},

在你的对应的组件中

例2：传递对象，添加新数据
1、首先在你的Vuex配置文件中，在state写一些数据

// 状态，存放一些公用的属性
state:{
 counter:100,
 userinfo:[
   {userId:1,name:"开发者-1",age:"20"},
   {userId:2,name:"开发者-2",age:"18"},
   {userId:3,name:"开发者-3",age:"28"},
   {userId:4,name:"开发者-4",age:"36"},
   {userId:5,name:"开发者-5",age:"12"}
 ]
},

2、然后在mutations中写添加数据的方法（这里的objdata会在第3步提到）

mutations:{
  // 传递对象，添加新数据
  addobj(state,objdata){
    state.userinfo.push(objdata)
  }
},

3、然后在组件中调用刚刚第二步写的方法，并且把你想添加的数据添加进去即可