Vuex - 更新整个数组 [英] Vuex - Update an entire array
问题描述
我有一个 Vue.js 应用程序.这个应用程序使用 Vuex 进行状态管理.我的商店看起来像这样:
const store = new Vuex.Store({状态: {项目: []},突变:{MUTATE_ITEMS:(状态，项目)=>{state.items = 物品；}},动作:{loadItems:(上下文，项目)=>{context.commit('MUTATE_ITEMS', items);}}});在我的 Vue 实例中，我有以下方法:
loadItems() {让项目 = [];for (让 I=0; I<10; I++) {items.push({ id:(I+1), name: 'Item #' + (I+1) });}this.$store.dispatch('loadItems', items);},当我运行它时，我注意到我的子组件中的项目列表没有得到更新.我怀疑这是因为 Vue.js 中的反应性模型.但是，我不确定如何更新整个数组.另外，我不确定是否需要在我的商店突变、商店操作或 Vue 实例方法本身中使用 Vue.set.我有点困惑.
组件:
<div><h1>项目 ({{ items.length }})</h1><表格><tr v-for="item in items" :key="item.id"><td>{{ item.id }}</td></tr></tbody></模板><脚本>从 'vuex' 导入 { mapState };导出默认{计算:地图状态({项目:状态 =>状态项})};
如何在 Vue.js 应用程序中更新集中存储在 Vuex 中的整个数组?
解决方案 使用 vue 的 set 函数.这将确保 Vue 的反应性启动并更新所需的对象.
从'vuex'导入Vuex；const store = new Vuex.Store({状态: {项目: []},突变:{MUTATE_ITEMS:(状态，项目)=>{Vue.set(state, 'items', items);//或者，最好创建一个数组的副本Vue.set(state, 'items', [...items]);}},动作:{loadItems:(上下文，项目)=>{context.commit('MUTATE_ITEMS', items);}}});
在处理数组或对象时，防止可变性是个好主意，我通常使用扩展运算符 {...myObject} 或 [..myArray] 这将防止从其他来源更改对象以更改您的来源，因此在 getter 中实现也是一个好主意.
<小时>更新:
这是一个工作示例:https://codesandbox.io/s/54on2mpkn(codesandbox 允许你有单个文件组件)
我注意到您没有任何getter，它们有助于获取数据.您可以直接使用计算值或使用 mapGetters 来调用它们.但它们不是强制性的.获取数据的三种方式
从功能的角度选择哪一个并不重要，但使用 getter 可以使代码更易于维护.
I have a Vue.js app. This app is using Vuex for state management. My store looks like this:
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:
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.set in my store mutation, store action, or in the Vue instance method itself. I'm slightly confused.
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?
解决方案 use vue's set function. This will make sure that the Vue's reactivity kicks in and updates the required objects.
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.
Update:
Here is a working example: https://codesandbox.io/s/54on2mpkn (codesandbox allows you to have single file components)
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
<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.
这篇关于Vuex - 更新整个数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆