vuex之mutations使用示例

在 vuex之state、mutations使用示例已经简单用过mutations，这一篇更全面去了解一下这个概念。

vuex官方文档对mutations的描述

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

你不能直接调用一个mutation handler。这个选项更像是事件注册。要唤醒一个mutation handler，你需要以相应的type调用store.commit方法

看之前文章中的示例代码，

src/components/Login.vue

      // 修改isLogin状态
      this.$store.commit('changeLogin', true)
      // 修改username状态
      this.$store.commit('changeUsername', this.username)
      // 修改password状态
      this.$store.commit('changePassword', this.password)

提交载荷

你可以向store.commit传入额外的参数，即mutation的载荷.

这里做一个用到mutation的小栗子

在store.js的state里添加一个count状态

src/store.js

    state: {
     // ...
      count: 0
    },

mutations里面添加2个操作count的方法，一个用来增加，一个用来重置

src/store.js

    mutations: {
      // ...
      addCount(state, n) {
        state.count += n
      },
      resetCount(state, data) {
        state.count = data;
      }
    }

回到Home.vue使用count

在计算属性的mapState里添加count

  computed: {
    // ...
    ...mapState({
      isLogin: state => state.isLogin,
      username: state => state.username,
      password: state => state.password,
      count: state => state.count
    }),
    // ...
  },

在methods里添加两个方法唤醒mutations

  methods: {
    add () {
      this.$store.commit('addCount', 1)
    },
    reset () {
      this.$store.commit('resetCount', 0)
    }
  }

最后在template里添加count相关内容

    <hr>
    <div>
      <h3>mutation载荷</h3>
      <span>{{count}}</span> | <button @click="add">+1</button> | <button @click="reset">重置</button>
    </div>

两个按钮分别调用add和reset事件

运行测试一下

使用对象形式的载荷也能实现这种效果

很多时候，尤其是当数据比较复杂，使用对象形式的载荷会更好。

修改store.js mutations addCount和resetCount事件

src/store.js

      addCount(state, payload) {
        state.count += payload.n
      },
      resetCount(state, payload) {
        state.count = payload.data;
      }

修改Home.vue methods add和reset方法

src/components/Home.vue

    add () {
      this.$store.commit('addCount', {
        n: 1
      })
    },
    reset () {
      this.$store.commit('resetCount', {
        data: 0
      })
    }

效果一样。多学会一种写法总是好的。

对象风格的mutation

提交mutation的另一种方式是直接使用包含type属性的对象

结合本例，修改Home.vue

  methods: {
    add () {
      this.$store.commit({
        type: 'addCount',
        n: 1
      })
    },
    reset () {
      this.$store.commit({
        type: 'resetCount',
        data: 0
      })
    }
  }

效果一样。

Mutation需遵守Vue的相应规则

以下摘自vuex官网

既然Vuex的store中的状态是响应式的，那么当我们变更状态时，监视状态的Vue组件也会自动更新。这也意味着Vuex中的mutation页需要与使用Vue一样遵守一些注意事项

最好提前在你的store中初始化好所需属性

当需要在对象上添加新属性时，你应该

使用Vue.set(obj, 'newProp', 123)，或者

以新对象替换老对象。例如，

　　　　　　state.obj = { ...state.obj, newProp: 123 }

（未完）