Мутация Vuex mutate не является реактивной

Мутация Vuex mutate не является реактивной

28.01.2020 02:08:17 Просмотров 32 Источник

государство.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
  }
}

форма.вю

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

проблема в том, что мутация не является реактивной.

enter image description here

enter image description here

как вы видите, состояние изменилось, и я использую геттер для получения stepBarItems, но ничего не изменилось. в чем же проблема?

У вопроса есть решение - Посмотреть?

Ответы - Мутация Vuex mutate не является реактивной / Vuex mutation mutate is not reactive

Является ответом!
Emīls Gulbis

28.01.2020 02:23:06

Вам действительно не нужны эти активные / текущие переменные. Я сделал пример использования вычисляемых свойств для получения нужного формата

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>

https://stackoverflow.com/questions/59947373/vuex-mutation-mutate-is-not-reactive/59947628#comment106015587_59947628
если stepLevel = 2, то третий элемент должен быть текущим = true, а предыдущие элементы и третий раз должны быть активными = true.
https://stackoverflow.com/questions/59947373/vuex-mutation-mutate-is-not-reactive/59947628#comment106016028_59947628
слегка адаптированный к вашим потребностям, отметьте этот ответ как правильный
https://stackoverflow.com/questions/59947373/vuex-mutation-mutate-is-not-reactive/59947628#comment106016090_59947628
я не должен использовать vuex для этого примера?
https://stackoverflow.com/questions/59947373/vuex-mutation-mutate-is-not-reactive/59947628#comment106016188_59947628
вы можете легко преобразовать его в vuex-сделать stepLevelstateсвойством и преобразовать methodsв actions. Но вы должны решить, действительно ли вам это нужно
Закрыть X