javascript Vuex - 更新整个数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50767191/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vuex - Update an entire array
提问by Some User
I have a Vue.js app. This app is using Vuex for state management. My store looks like this:
我有一个 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);
}
}
})
;
In my Vue instance, I have the following method:
在我的 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);
},
When I run this, I notice that the item list in my child components are not getting updated. I suspect this is because of the reactivity model in Vue.js. However, I'm not sure how to update an entire array. In addition, I'm not sure if I need to use Vue.setin my store mutation, store action, or in the Vue instance method itself. I'm slightly confused.
当我运行它时，我注意到我的子组件中的项目列表没有更新。我怀疑这是因为 Vue.js 中的反应性模型。但是，我不确定如何更新整个数组。另外，我不确定是否需要Vue.set在我的 store更改、store action 或 Vue 实例方法本身中使用。我有点困惑。
Component:
零件：
<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>
How do I update an entire Array that is centrally stored in Vuex in a Vue.js app?
如何在 Vue.js 应用程序中更新集中存储在 Vuex 中的整个数组？
回答by Daniel
use vue's setfunction. This will make sure that the Vue's reactivity kicks in and updates the required objects.
使用 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);
}
}
})
;
When dealing with arrays or Objects, it's a good idea to prevent mutability, which I usually do with a spread operator {...myObject}or [..myArray]this will prevent changes to the object from other source to change your source, so it's a good idea to implement in getters too.
在处理数组或对象时，防止可变性是一个好主意，我通常使用扩展运算符来执行此操作，{...myObject}否则[..myArray]这将防止从其他源更改对象以更改您的源，因此在 getter 中实现也是一个好主意。
Update:
更新：
Here is a working example: https://codesandbox.io/s/54on2mpkn(codesandbox allows you to have single file components)
这是一个工作示例：https://codesandbox.io/s/54on2mpkn（codesandbox 允许您拥有单个文件组件）
The thing I noticed is that you don't have any getters, those help get the data. You can call them using computed values directly, or using mapGetters. but they are not mandatory. Here are three ways you can get the data
我注意到的事情是你没有任何getter，它们有助于获取数据。您可以直接使用计算值或使用 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>
it doesn't matter which one you chose from the functionality standpoint, but using getters makes for more maintainable code.
从功能的角度来看，您选择哪一个并不重要，但是使用 getter 可以使代码更易于维护。
回答by Bhojendra Rauniyar
You need to dispatch action like any of the following:
您需要分派以下任何一项操作：
// dispatch with a payload
this.$store.dispatch('loadItems', {items})
// dispatch with an object
this.$store.dispatch({type: 'loadItems',items})
