访问 Vuex store 中组件的数据属性答案

【问题标题】：Access data property of component in Vuex store访问 Vuex store 中组件的数据属性
【发布时间】：2020-12-17 07:10:15
【问题描述】：

我有一个组件，其数据为：

export default {
  data() {
    return {
      allItems: [],
      orderItems: {},
      itemAdded: [],
    };
  },

我想访问 Vuex store.js 文件的本地组件中存在的 itemAdded 数组数据。有什么办法吗？

【问题讨论】：

标签： javascript vue.js vuejs2 vuex

【解决方案1】：

您无法从 vuex 访问组件数据，您可以做的是在调度 vuex 操作时将数据作为有效负载传递。

例如，您的 vuex 操作：

actions: {
  doSomething(context, itemAdded) {
    // Do something with itemAdded
  }
}

并从您的组件中分派操作：

this.$store.dispatch('doSomething', this.itemAdded);

如果您想从 vuex 操作中更改组件上的 itemAdded 值，您可以像这样返回值：

actions: {
  doSomething(context, itemAdded) {
    // Do something with itemAdded
    return itemAdded;
  }
}

在你的组件上：

// Need to use await since dispatch return a promise, you can also use `.then`
this.itemAdded = await this.$store.dispatch('doSomething', this.itemAdded);

请记住，Vuex 是一种状态管理，并且 vuex 操作应该执行与状态相关的操作，而不是存储“可重用函数”的地方。我想不出你为什么要从动作中返回编辑后的值，但如果你认为它有意义/它与状态有关，那么你可以这样做。

【讨论】：

但是如果我在 store.js 中更改 itemAdded 会改变
您将在 vuex 中保存另一个数据。您将 itemAdded 传递给 vuex 突变或操作，并在您的 vuex 中使用它。所以 itemAdded 是一样的，但是你可以把它放在你的 vuex 商店里，随时随地使用它。
不，它不会更改组件上的值，您可以从 vuex 操作返回更改后的值并分配给组件值，例如检查我的编辑。