首页 > 建站教程 > 前端框架 >  Vuex：Mutation管理状态正文

Vuex：Mutation管理状态

本文转载自CSDN 闲人王昱珩 的文章，感谢大佬！

  更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

  关于vuex为什么这样做,先不要管,但请相信他这么做必然有很多的好处.在vue中,我们要修改data中的值,一般会怎么做.
查看代码
打印?
1this.count = 2 //count from 1 to 2,触发视图更新
   很简单,直接赋值,这也符合我们写代码的"一般规律",很舒服.但如果我们要修改vuex store中的状态值,我们就不能简单的通过赋值的方式来做了,如果你这样做,控制台便会报错.
查看代码
打印?
1this.$store.state.count = 2 //控制台打印错误
   当然vuex的state是可以更改的,不然就太睿智了,vuex提供了mutation来追踪你对state的值的操作,这肯定有什么好处在里面,暂时先把为什么放一边,先了解一下mutation的用法.

   Vuex 中的 mutation 非常类似于vue中的$emit事件,

   每个 mutation 都有一个字符串的事件类型 (type) ,相当于当前事件的唯一标识,以便于你用commit触发它.

   每个mutation都有一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数.同时他也支持额外参数的传入,额外参数的术语叫'载荷'.

  直接看代码和注释吧,不想过多解释这个
查看代码
打印?
01//state.js
02let state = {
03  count: 1,
04  name: 'dkr',
05}
06export default state
07 
08//mutation.js
09// 第一个参数默认接收state对象
10const increment = (state) => {
11  state.count++
12}
13const decrement = (state) => {
14  state.count--
15}
16//第二个参数接收'载荷'
17const add = (state, n) => {
18  state.count += n
19}
20const fn = (state, json) => {
21  state.name = json.first + json.second + state.name
22}
23export {increment, decrement, add, fn}
24 
25<template>
26  <div>
27    <div>
28      <button @click="decrement">-</button>
29      <span>{{count}}</span>
30      <button @click="increment">+</button>
31    </div>
32    <div style="margin-top:20px;">
33      <button @click="add(1)">+1</button>
34      <button @click="add(2)">+2</button>
35    </div>
36    <button style="margin-top:20px" @click = "changeName('my ','name is ')">{{name}}</button>
37  </div>
38</template>
39  
40<script>
41export default {
42  computed: {
43    count () {
44      return this.$store.state.count
45    },
46    name () {
47      return this.$store.state.name
48    }
49  },
50  methods: {
51    decrement () {
52      this.$store.commit('decrement')
53    },
54    increment () {
55      this.$store.commit('increment')
56    },
57    add (n) {
58      // 你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
59      this.$store.commit('add', n)
60    },
61    changeName (first, second) {
62      // this.$store.commit('fn', {
63      //   'first': first,
64      //   'second': second
65      // })
66      // 上面的写法等同于下面，对象风格的提交方式，个人觉得上面的写法更清晰
67      this.$store.commit({
68        'type': 'fn',
69        'first': first,
70        'second': second
71      })
72    }
73  }
74}
75</script>
   结果如下：



关于mutation的辅助函数,我这里提供一下上述代码的辅助函数写法,具体原理请看本系列第二篇文章,不想过多赘述.
查看代码
打印?
01<template>
02  <div>
03    <div>
04      <button @click="decrement">-</button>
05      <span>{{count}}</span>
06      <button @click="increment">+</button>
07    </div>
08    <div style="margin-top:20px;">
09      <button @click="add(1)">+1</button>
10      <button @click="add(2)">+2</button>
11    </div>
12    <button style="margin-top:20px" @click = "changeName({'first':'my ',second:'name is '})">{{name}}</button>
13  </div>
14</template>
15  
16<script>
17import { mapMutations } from 'vuex'
18export default {
19  computed: {
20    count () {
21      return this.$store.state.count
22    },
23    name () {
24      return this.$store.state.name
25    }
26  },
27  // 辅助函数写法
28  methods: {
29    ...mapMutations({
30      decrement: 'decrement',
31      increment: 'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
32      add: 'add',
33      changeName: 'fn' // 将 `this.changeName(json)` 映射为 `this.$store.commit('fn', json)`
34    })
35  }
36}
37</script>
   最后说一下mutation的使用场景,mutation在使用的是请不要涉及任何异步操作,如果你想改变count的值,你通过mutation中的两个异步事件,都改变了这个状态值,你怎么知道什么时候回调和哪个先回调呢,因此mutation用于管理同步事件,如果有异步操作,请用action

本文转载自：https://jackma.blog.csdn.net/article/details/82185740  感谢大佬的文章
TAGS: Vuex  Mutation