vuex学习笔记-核心概念（Mutation）

Mutation

Mutation用于修改变更$store中的数据

1、创建vuex项目

使用mutations的第一种方式：
编写app.vue

<template>
  <div id="app">
    <addition></addition>
  </div>
</template>

<script>
import Addition from './components/Addition.vue'

export default {
  name: 'app',
  //注册组件
  components: {
    Addition
  }
}
</script>

<style>
</style>

创建组件Addition

<template>
  <div>
    <h3>当前count值（第一种方式）{{$store.state.count}}</h3>
    <h3>当前count值（第二种方式）{{count}}</h3>
    <button @click="handleAddCount">+1</button>
    <button @click="handleAddCount2(3)">+3</button>
  </div>
</template>
<script>
// 按需导入mapState函数
import { mapState } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    // count+1 不带参
    handleAddCount () {
      // 第一个参数就是要调用的mutations中的函数名
      this.$store.commit('add')
    },
    // count+1 带参
    handleAddCount2 (num) {
      // 第一个参数就是要调用的mutations中的函数名
      // 第二个参数就是传递给add函数的参数
      this.$store.commit('add2', num)
    }
  }
}
</script>
<style lang="less" scoped>
</style>

编写store目录下的index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0 // 需要访问的数据
  },
  mutations: {
    // 不带参
    // 第一个参数为store中的$state对象,固定的
    add (state) {
      state.count++
    },
    // 带参
    // 第一个参数为store中的$state对象,固定的
    add2 (state, num) {
      state.count += num
    }
  },
  actions: {},
  modules: {}
})

运行结果如下

使用mutations的第二种方式：

<template>
  <div>
    <h3>当前count值（第一种方式）{{$store.state.count}}</h3>
    <h3>当前count值（第二种方式）{{count}}</h3>
    <button @click="add">+1</button>
    <button @click="add2(3)">+3</button>
  </div>
</template>
<script>
// 按需导入mapState，mapMutations 函数
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    // 获得mapMutations映射的函数
    ...mapMutations(['add', 'add2'])
  }

}
</script>
<style lang="less" scoped>
</style>

总结:

在组件中使用mutations有两种方式

• 通过 this.$store.commit()调用
• 先按需导入mutations函数： import { mutations} from 'vuex',然后映射为组间中的methods中的函数methods:{ ...mutations(['全局函数名称']) }