我有一个Vue.js应用。此应用程序正在使用Vuex进行状态管理。我的商店看起来是这样的:
const store = new Vuex.Store({
state: {
items: []
},
mutations: {
MUTATE_ITEMS: (state, items) => {
state.items = items;
}
},
actions: {
loadItems: (context, items) => {
context.commit('MUTATE_ITEMS', items);
}
}
})
;在我的Vue实例中,我有以下方法:
loadItems() {
let items = [];
for (let I=0; I<10; I++) {
items.push({ id:(I+1), name: 'Item #' + (I+1) });
}
this.$store.dispatch('loadItems', items);
},当我运行这段代码时,我注意到我的子组件中的项目列表没有更新。我怀疑这是因为Vue.js中的反应性模型。但是,我不确定如何更新整个数组。此外,我不确定是否需要在我的存储变异、存储操作或在Vue实例方法本身中使用Vue.set。我有点困惑。
组件:
<template>
<div>
<h1>Items ({{ items.length }})</h1>
<table>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.id }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
computed: mapState({
items: state => state.items
})
};
</script>如何在Vue.js应用程序中更新集中存储在Vuex中的整个阵列?
https://stackoverflow.com/questions/50767191
复制相似问题