Vuex 中mutations 属性的简单使用方法

Vue中利用Vuex中mutaions属性简单更改数据

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    num: 666
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

1.让state中的num值实现简单的 ++

第一步在页面中渲染num数据 并添加一个简单的点击事件

    <h2>{{ $store.state.num }}</h2>
    <button @click="add">+</button>

第二部在mutaions中定义一个方法 并写业务逻辑代码

  mutations: {
    add(state) {  //state是必传的第一个参数
      state.num++
    }
  },

第三步在vue页面使用methods属性中使用 this.$store.commit()方法调用Vuex中定义的方法

 methods: {
    add() {
      this.$store.commit('add');
    },
  },

第四步运行文件 就能实现每次点击button按钮 就可以让num数据实现简单的+1效果

如果想每次+2或者+5，+10....+100呢？？？

可以在第二步中可以传入第二个参数 （形参）

  mutations: {
    add(state, n) {
      state.num += n
    }
  },

并在第三步中加入想要加的值（实参） 

 methods: {
    add() {
      this.$store.commit('add',10);
    },
  },

这里输入的10，就可以实现每次点击加10了。