Vuex突变突变没有反应性

Question

state.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
    }
  ]
})

mutations.js：

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

form.vue

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

问题是突变没有反应性。

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

Answer 1

您确实不需要这些活动/当前变量。我举了一个使用计算属性来获取所需格式的示例