Vuex 突变 mutate 不是反应性的

Question

状态.js：

export default () => ({
  stepBarItems: [
    {
      title: 'General Info',
      active: false,
      current: false
    },
    {
      title: 'Personal Details',
      active: false,
      current: false
    },
    {
      title: 'Travel Details',
      active: false,
      current: false
    },
    {
      title: 'Payment',
      active: false,
      current: false
    },
    {
      title: 'Upload Documents',
      active: false,
      current: false
    }
  ]
})

突变.js：

export default {
  setCurrentStepBarItem(state) {
    const index = state.stepLevel - 1
    state.stepBarItems[index].active = true
    state.stepBarItems[index].current = true
  }
}

表单.vue

  created() {
    this.$store.commit('visa/setCurrentStepBarItem')
  },

问题是突变不是反应性的。

如您所见，状态已更改，我使用 getter 来获取 stepBarItems，但没有任何更改。 问题是什么？

Answer 1

您并不真正需要这些活动/当前变量。 我制作了使用计算属性获得所需格式的示例

 new Vue({ el: "#app", data: () => ({ stepBarItems: [ 'General Info', 'Personal Details', 'Travel Details', 'Payment', 'Upload Documents' ], stepLevel: 0 }), computed: { computedStepBarItems() { return this.stepBarItems.map((item, index) => ({ title: item, current: this.stepLevel === index, active: this.stepLevel >= index })) } }, methods: { next() { this.stepLevel += 1 }, prev() { this.stepLevel -= 1 } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <pre>{{ computedStepBarItems }}</pre> <button @click="prev()">Prev</button> <button @click="next()">Next</button> </div>