Array splice操作可直接修改vuex state的属性值

<template>
  <div>
    <ul>
      <li v-for="item in trackListData">{{item}}</li>
      <button @click="removeTrack">DELET</button>
    </ul>
  </div>
</template>

<script>
export default {
  mixins: [mixins],
  data() {
    return {
      trackListData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
    };
  },
  methods: {
    removeTrack() {
      let arr = this.testArr;
      arr.splice(arr.length - 1, 1);
    }
  },
   mounted() {
    this.setTestArrActions(this.trackListData)
  },
};
</script>

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    testArr: []
  },
  mutations: {
    setTestArr(state, data) {
      state.testArr = data
    },
  },
  actions: {
    setTestArrActions(context, data) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          context.commit('setTestArr', data)
          resolve()
        }, 100)
      })
    },

  },
  modules: {}
})

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

实践中发现当state的属性是一个引用类型时，初次mutation赋值后。之后的js操作(如splice)如果能直接索引类型原始值。那么这类修改操作，无需再次提交mutation，可直接改变state的属性的值