vuex—核心概念mutations

在vuex中数据流是单向的,这意味着组件不能直接修改state中的值，就算我们写了默认情况下vue他也不会报错，比如：

button @click="handleAdd">值 + 1</button>


methods:{
     handleAdd (n) {
      // 错误代码(vue默认不会监测，监测需要成本)
       this.$store.state.count++
      // console.log(this.$store.state.count) 
    },
}

但是当我们开启严格模式后vuex会进行报错

那我们如何操作和修改vuex中state的数据呢？
答：通过vuex中的mutations。

一 介绍mutations

state数据的修改只能通过mutations，并且mutations必须是同步（commit）的
如何定义和理解mutation？如下代码

const store  = new Vuex.Store({
  state: {
    count: 0
  },
  	// 定义mutations
  mutations: {
	// 方法里参数 第一个参数是当前store的state属性
    // payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷
    addCount (state) {
      state.count += 1
    }
  }
})
//我们使用时mutation时要在组件中进行启动，如
this.$store.commit('addCount')

二 mutations的传参语法

mutations: {
  addCount (state, count) {
    state.count = count
  }
},
//提交mutation 叫mutations起来干活，这里这个10 就被传入到addcount形参count中了
handle ( ) {
  this.$store.commit('addCount', 10)
  
  
//小tips: 提交的参数只能是一个, 如果有多个参数要传, 可以传递一个对象
this.$store.commit('addCount', {
  count: 10,
  id：1
})
}

三 辅助函数=mapMutations

mapMutations和mapState很像，它把位于mutations中的方法提取了出来，我们可以将它导入

import  { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['addCount'])
}
//此时就可以在组件中通过点击事件或者其他进行调用啦
<button @click="addCount">值+1</button>