Vuex入门（4）—— 用Mutation管理状态

偏执的太偏执、 2021-09-16 06:16 361阅读 0赞

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

关于vuex为什么这样做,先不要管,但请相信他这么做必然有很多的好处.在vue中,我们要修改data中的值,一般会怎么做.

this.count = 2 //count from 1 to 2,触发视图更新

很简单,直接赋值,这也符合我们写代码的"一般规律",很舒服.但如果我们要修改vuex store中的状态值,我们就不能简单的通过赋值的方式来做了,如果你这样做,控制台便会报错.

this.$store.state.count = 2 //控制台打印错误

当然vuex的state是可以更改的,不然就太睿智了,vuex提供了mutation来追踪你对state的值的操作,这肯定有什么好处在里面,暂时先把为什么放一边,先了解一下mutation的用法.

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

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

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

直接看代码和注释吧,不想过多解释这个

//state.js
    let state = {
      count: 1,
      name: 'dkr',
    }
    export default state

//mutation.js
    // 第一个参数默认接收state对象
    const increment = (state) => {
      state.count++
    }
    const decrement = (state) => {
      state.count--
    }
    //第二个参数接收'载荷'
    const add = (state, n) => {
      state.count += n
    }
    const fn = (state, json) => {
      state.name = json.first + json.second + state.name
    }
    export {increment, decrement, add, fn}

<template>
      <div>
        <div>
          <button @click="decrement">-</button>
          <span>{
       {count}}</span>
          <button @click="increment">+</button>
        </div>
        <div style="margin-top:20px;">
          <button @click="add(1)">+1</button>
          <button @click="add(2)">+2</button>
        </div>
        <button style="margin-top:20px" @click = "changeName('my ','name is ')">{
       {name}}</button>
      </div>
    </template>
    
    <script>
    export default {
      computed: {
        count () {
          return this.$store.state.count
        },
        name () {
          return this.$store.state.name
        }
      },
      methods: {
        decrement () {
          this.$store.commit('decrement')
        },
        increment () {
          this.$store.commit('increment')
        },
        add (n) {
          // 你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
          this.$store.commit('add', n)
        },
        changeName (first, second) {
          // this.$store.commit('fn', {
          //   'first': first,
          //   'second': second
          // })
          // 上面的写法等同于下面，对象风格的提交方式，个人觉得上面的写法更清晰
          this.$store.commit({
            'type': 'fn',
            'first': first,
            'second': second
          })
        }
      }
    }
    </script>

结果如下:

![70][]

关于mutation的辅助函数,我这里提供一下上述代码的辅助函数写法,具体原理请看[本系列第二篇文章][Link 1],不想过多赘述.

<template>
      <div>
        <div>
          <button @click="decrement">-</button>
          <span>{
       {count}}</span>
          <button @click="increment">+</button>
        </div>
        <div style="margin-top:20px;">
          <button @click="add(1)">+1</button>
          <button @click="add(2)">+2</button>
        </div>
        <button style="margin-top:20px" @click = "changeName({'first':'my ',second:'name is '})">{
       {name}}</button>
      </div>
    </template>
    
    <script>
    import { mapMutations } from 'vuex'
    export default {
      computed: {
        count () {
          return this.$store.state.count
        },
        name () {
          return this.$store.state.name
        }
      },
      // 辅助函数写法
      methods: {
        ...mapMutations({
          decrement: 'decrement',
          increment: 'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
          add: 'add',
          changeName: 'fn' // 将 `this.changeName(json)` 映射为 `this.$store.commit('fn', json)`
        })
      }
    }
    </script>
    
    <style>
    
    </style>

###    最后说一下mutation的使用场景,mutation在使用的是请不要涉及任何异步操作,如果你想改变count的值,你通过mutation中的两个异步事件,都改变了这个状态值,你怎么知道什么时候回调和哪个先回调呢,因此mutation用于管理同步事件,如果有异步操作,请用action. ###

下一章会玩一下action

最近收到了阿里外包的offer,感觉有必要谈一下这件事,有时间把这个事情发到博客里供大家参考.

[70]: /images/20210813/db1804925ea64d13b77a09286b8f2b44.png
[Link 1]: https://blog.csdn.net/dkr380205984/article/details/82185740