Мутация Vuex mutate не является реактивной
государство.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')
},
проблема в том, что мутация не является реактивной.
как вы видите, состояние изменилось, и я использую геттер для получения stepBarItems, но ничего не изменилось. в чем же проблема?
У вопроса есть решение - Посмотреть?

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

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>

если stepLevel = 2, то третий элемент должен быть текущим = true, а предыдущие элементы и третий раз должны быть активными = true.

слегка адаптированный к вашим потребностям, отметьте этот ответ как правильный

я не должен использовать vuex для этого примера?

вы можете легко преобразовать его в vuex-сделать
stepLevel
state
свойством и преобразовать methods
в actions
. Но вы должны решить, действительно ли вам это нужно
Помочь в развитии проекта: