Vuex从入门到实战（三）——使用Mutations变更state中的数据

news/2024/7/24 2:10:45 标签: vue, vuex, mutations

上篇讲到可以通过this.$store.state.count或者...mapState(['count'])的方式可以拿到我们在state中存储的count值，那么如何修改这个值呢？
很多人都会想到this.$store.state.count++，但是这样虽然可以达到目的，却存在很大的隐患——多处修改却无处溯源。
这节我们来认识一下mutations，学习正规操作公共数据的方式。

注：此篇文章案例续上篇

一、Mutation是用于变更Store中的数据。

vuex只能通过mutation变更Store数据，不可以直接操作Store中的数据。
通过mutation的这种方式虽然操作繁琐了一点，但是却可以集中监控所有数据的变化。
触发方式：

1. this.$store.commit('XXX')

2. import { mapMutations } from 'vuex'
   ----------------------------------
   methods: {
    // 2.将指定的mutations函数，映射为当前组件的methods函数
    ...mapMutations(['XXX'])
  }

mutations_25">二、计数器实例——带参+两种方式触发mutations

注：还是基于第一篇新建的vuex_demo1项目，本篇使用mutations实现加减一、加减N操作。

在这里插入图片描述

改动store/index.js——定义mutations

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// new一个Vuex实例并暴露出去
export default new Vuex.Store({
  state: {
    count: 0
  },
  // 1.mutations中第一个参数永远都是自身的state，后面的参数都是形参
  mutations: {
    add (state) {
      state.count++
    },
    // 2.第二个位置的step是我们传递的第一个参数，有其他参数还可以在后面加
    addN (state, step) {
      state.count += step
    },
    sub (state) {
      state.count--
    },
    subN (state, step) {
      state.count -= step
    }
  }
})

改动Addition组件——第一种方式：$store.commit触发mutations

<template>
    <div>
        <p>当前count的值为：{{ $store.state.count}}</p>
        <button @click="handleAdd()">+1</button>
        <button @click="handleAddN()">+N</button>
    </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {
    handleAdd () {
      // commit的作用，就是调用某个mutations函数
      this.$store.commit('add')
    },
    handleAddN () {
      this.$store.commit('addN', 3)
    }
  }
}
</script>

改动Subtration组件——第二种方式：mapMutations触发mutations

<template>
    <div>
        <p>当前count的值为：{{ count }}</p>
        <button @click="handleSub()">-1</button>
        <button @click="handleSubN()">-N</button>
    </div>
</template>

<script>
// 1.从vuex中按需导入mapMutations
import { mapState, mapMutations } from 'vuex'

export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    // 2.将指定的mutations函数，映射为当前组件的methods函数
    ...mapMutations(['sub', 'subN']),
    handleSub () {
      this.sub()
    },
    handleSubN () {
      this.subN(3)
    }

  }
}
</script>