vuex基础 (三) 01-mutations——修改数据-可看成事件，在src-main.js中的store声明的vuex实例中进行定义

03-vuex基础-mutations——修改数据，在src-main.js中的store声明的vuex实例中进行定义

• 修改数据

  更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

  网址：https://vuex.vuejs.org/zh/guide/mutations.html

申明：

第一步：在src/main.js中：申明修改数据

//初始化vuex  里面是配置项
const store = new Vuex.Store({
   //申明数据
    state:{
        //申明数据,相当于vue实例中的data
        count:1
    }
    //修改数据
+    mutations: {
    // 改变数据
    // 1. 没有参数  自增 count 数据
+    // increment (state) {
+    //   state.count++
+    // }
    // 2. 使用参数  payload-形参，载荷（ 运输数据 ）  可以传参数的写法
+    increment (state, payload) {
+      // payload  ====> {num:100}  
+      state.count += payload.num   //payload.num也可以直接写payload
+    }
+  }
})

第二步：在使用组件com-a组件，绑定修改事件

第三步：在所用组件com-a.vue内，申明点击修改事件

调用：

export default{
   data(){
       return {
           myCount:1000
       }
   },
    //方法
+   methods: {
		//修改 vuex 提供的 count 数据，  store，是vuex实例；
		    //通过commit提交，进行调用mutations方法   increment-main.js中mutations里定义的数据
+       fn () {
			//在组件内 调用 mutations提供的数据修改函数   {num：10}-也可以直接写10
			  
+         this.$store.commit('increment', { num: 100 })
+      }
+   },
}

注：

修改 vuex 提供的 count 数据， store，是vuex实例；

1.默认提交——在组件内 调用 mutations提供的数据修改函数

this.$store.commit(‘increment’)

2.带参提交——可以传参的写法

this.$store.commit(‘increment’, { num: 100 })

第四步：打开页面显示，验证修改数据事件的效果

来源：CSDN

作者：viceen

链接：https://blog.csdn.net/weixin_44867717/article/details/104475844