Vuex -更新整个阵列
我有一个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中的整个阵列？
回答 5
Stack Overflow用户
发布于 2018-06-09 04:11:05
使用vue的set函数。这将确保Vue的反应性生效并更新所需的对象。
import Vuex from 'vuex';
const store = new Vuex.Store({
state: {
items: []
},
mutations: {
MUTATE_ITEMS: (state, items) => {
Vue.set(state, 'items', items);
// or, better yet create a copy of the array
Vue.set(state, 'items', [...items]);
}
},
actions: {
loadItems: (context, items) => {
context.commit('MUTATE_ITEMS', items);
}
}
})
;在处理数组或对象时，防止可变性是一个好主意，我通常使用扩展运算符{...myObject}或[..myArray]来做这件事，这将防止来自其他来源的对象更改您的源代码，所以在getters中实现也是一个好主意。
更新：
下面是一个有效的例子：https://codesandbox.io/s/54on2mpkn (codesandbox允许你拥有单个文件组件)
我注意到的一件事是，你没有任何getters，这些getters有助于获取数据。可以直接使用计算值调用它们，也可以使用mapGetters调用它们。但它们不是强制性的。以下是获取数据的三种方法
<script>
import { mapGetters } from "vuex";
import Item from "./Item";
export default {
name: "ItemList",
components: {
Item
},
computed: {
...mapGetters(["items"]), // <-- using mapGetters
itemsGet() { // <-- using getter, but not mapGetters
return this.$store.getters.items;
},
itemsDirect() { // <--no getter, just store listener
return this.$store.state.items;
}
}
};
</script>从功能的角度来看，选择哪一个并不重要，但是使用getter可以使代码更易于维护。
Stack Overflow用户
发布于 2018-06-09 03:28:52
您需要分派操作，如以下任一操作：
// dispatch with a payload
this.$store.dispatch('loadItems', {items})
// dispatch with an object
this.$store.dispatch({type: 'loadItems',items})Stack Overflow用户
发布于 2021-08-04 15:20:35
如果你在2021年得到了这个答案，并且正在使用Vuex 4，Vue 3，Typescript，setup()函数(也被称为Composition )，下面是我解决类似问题的方法。
最初，我通过异步操作在vuex状态下改变了一个数组，并没有看到UI的变化。所以这就是它的借口。
我有一个像这样的vuex州
interface State {
areas: Area[]
}像这样的组件
export default {
name: "Area",
setup() {
const store = UseStore();
store.dispatch('fetchAreas');
const areas = store.state.areas;
return {
store,
areas,
}
}
}该操作调度函数如下所示
async ['fetchAreas](context: ContextType<State>): Promise<void> {
const areas = await getTheStuff();
context.commit('setAreas', areas);
} 这就是借口
我的问题出在'setAreas‘的突变接收器上
它最初看起来像这样
['setAreas'](state: State, value: Area[]) {
state.areas = value;
}这导致无法触发ui更新。我把它改成这样
['setAreas'](state: State, value: Area[]) {
state.areas.splice(0, state.areas.length);
value.forEach(v => state.areas.push(v));
}这触发了UI更新。为什么？
我认为，通过最初覆盖整个数组，通过反应性进行的vuex更改检测丢失了对原始数组的引用，因此在vuex将新数组重新注册为反应性时，组件不会发生更改。
第二种方法利用数组方法，保持原始数组引用不变，但完全更新其元素。它不是很有效，但它是有效的，有时，这就是我们所能希望的。
https://stackoverflow.com/questions/50767191
复制相似问题