Javascript 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应用程序中集中存储在Vuex中的整个阵列

您需要像以下任何一项那样分派操作：

// dispatch with a payload
this.$store.dispatch('loadItems', {items})

// dispatch with an object
this.$store.dispatch({type: 'loadItems',items})

---

使用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]

这样可以防止从其他源更改对象以更改源，因此在getter中实现也是一个好主意

---

更新： 下面是一个工作示例：（codesandbox允许您拥有单个文件组件）

我注意到，您没有任何帮助获取数据的getter。您可以直接使用计算值或使用MapGetter调用它们。但它们不是强制性的。这里有三种获取数据的方法

<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>

从“vuex”导入{mapGetters}；
从“/Item”导入项目；
导出默认值{
名称：“项目列表”，
组成部分：{
项目
},
计算：{
…mapGetters（[“items”]），//我遇到了这样的问题，我在组件中解决了如下：/

计算：{

 data: {
     get() {
         this.$store.commit('updateData', this.$store.state.data)
         return this.$store.state.data;
     },
 }

}
//在商店里

 mutations: {
      updateData(state,item){
          store.state.data = item;
      }
  }

是的，这非常令人惊讶。
感谢您的回复。我尝试了两种方法。但是，两种方法都不起作用。我在
Vue.set（…）之前添加了
console.log（items）；
call。这确认了items数组按预期存在。但是，它仍然没有更新子组件中的数据。您能否共享如何调用子组件中数据的代码？我怀疑您可能在
items
数组中查找某个项的更改感谢您的帮助。我已经创建了一个JSFIDLE。值得注意的是，我实际上可以将我的单个文件组件放在小提琴中，因此我添加到了上面的问题本身。再次感谢您的帮助。我认为更多的是关于如何呈现存储和组件的问题，因为您的变异实际上是有效的：@sovalina感谢您共享该工具。我以前从未见过这种情况。我加载了我的整个项目。请注意，我不知道如何导入main.js文件中的组件。我的实际代码使用了
require
语句。我感觉它太接近了。我只是不确定我做错了什么。您可以在路由器中使用
import
而不是
require
（您可以查看差异）：
 mutations: {
      updateData(state,item){
          store.state.data = item;
      }
  }