Mutations是啥------修改修改修改
更改 Vuex 的 store 中的state
在前面我们知道如何去获取state里面的值，可以直接使用state.XX来获取，也可以使用Getter来获取state。
但是我们要如何去更改state，这就是Mutations。
我们要如何调用Mutations的函数呢。
这就要用到commit函数，
const store = new Vuex.Store({ state: { name: "old name", age: 18, }, mutations: { changName(state) { state.name = "newName" }, addAge(state,num) { state.age +=num }, } })
<template> <div> <button @click="changeName">我要改名</button> <button @click="addAge">我长大啦</button> <p>{{name}}</p> <p>{{age}}</p> </div> </template> <script> export default { name: "Home", computed: { age() { return this.$store.state.age; }， name(){ this.$store.state.name } }, methods: { changeName() { this.$store.commit("changName"); }, addAge() { this.$store.commit("addAge",18); }, } }; </script>
commit提交
上面的例子演示了一种提交的方式
methods: { changeName() { this.$store.commit({type:"changName"}); },
mapMutations
- 引入
import { mapMutations } from 'vuex'
- 使用
methods: { ...mapMutations([ 'changeName', // 将 `this.increment()` 映射为 `this.$store.commit('increment')` ]), ...mapMutations({ changeName12: 'changeName' // 将 `this.add()` 映射为 `this.$store.commit('increment')` }) }
注意：Mutations不要出现异步操作，虽然写了不会报错，程序也能运行，但是官方不建议写。异步操作全部放在action里
比如下面这个例子，一秒钟之后更改名字，其实也可以运行.
mutations: { changName(state) { setTimeout(() => state.name = "newName" , 1000) }, }
