javascript - Vuex 突变 mutate 没有反应
问题描述
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
}
]
})
突变.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,但没有任何更改。问题是什么?
解决方案
您真的不需要这些活动/当前变量。我为使用计算属性获取所需格式做了示例
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>
推荐阅读
- c++ - 有什么方法可以通过向量显示结构的内容?
- json - 将 jq 查询的结果聚合到单个数组中
- bash - 如何仅列出“普通”可读文件夹(例如不压缩文件夹)?
- c# - 如何知道 .txt 扩展名是否包含纯文本或 CSV 结构?
- git - 将文件从主存储库重构为具有历史记录的子模块
- go - 如何以编程方式访问/执行 Go 工具
- azure - UserAgentApplication 的详细日志记录
- visual-studio - 在 Visual Studio 2017 中构建搅拌机?
- vb.net - 对 Google 自定义搜索 API 使用 VB GET 请求;未找到 URL 或非法请求
- sql - 更改列值(实际上没有在数据库中更新它)并将多行列为一行上的列值