V-forVuex不能在mutation处理程序之外改变vuex存储状态

使用mutation处理程序进行状态更改。示例：

在Vuex store中定一个state、mutations和actions对象

const state = {
  items: []
}

const mutations = {
  addItem(state, item) {
    state.items.push(item)
  }
}

const actions = {
  addItem({ commit }, item) {
    commit('addItem', item)
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions
})

在组件中使用该store：

<template>
  <div>
    <h2>Items:</h2>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
   ...mapState({
      items: state => state.items
    })
  },
  methods: {
    ...mapActions(['addItem'])
  }
}
</script>

当我们点击添加项目按钮时，调用的是addItem action。该action通过dispatchcommit给mutation来添加项目。mutation会将新项目添加到vuex store中。这样就可以正确地更改vuex store中的状态了。