Vuex mutation mutate is not reactive

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')
  },

the problem is that mutation is not reactive.

as you see, state is changed and i use getter to get stepBarItems,but no things changed. what is the problem?

Answer 1

You dont realy need these active/current variables. I made example for using computed properties to get desired format

 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>