在Vue中,如果想要以响应方式更新Vuex中的数组,可以使用Vue的$set
方法。
首先,在Vuex store中,声明一个名为state
的数组:
state: {
items: []
}
然后,在组件中,通过mapState
辅助函数将items
映射到组件的计算属性中:
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['items'])
},
// 组件的其他代码
}
现在,如果要以响应方式更新items
数组,可以使用$set
方法来替代直接赋值:
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['items'])
},
methods: {
addItem(item) {
// 正确的方式:使用$set方法
this.$store.commit('addItem', item);
}
}
}
最后,需要在Vuex store中的mutations中定义addItem
方法,使用Vue.$set
方法更新items
数组:
mutations: {
addItem(state, item) {
// 正确的方式:使用Vue.$set方法
Vue.$set(state.items, state.items.length, item);
}
}
这样,通过使用Vue.$set
方法,就可以以响应方式更新Vuex中的数组。