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

Question

我有一个包含数据的组件：

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

我想访问 Vuex store.js文件中本地组件中存在的itemAdded数组数据。 无论如何要这样做吗？

Answer 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 动作应该做与状态相关的动作，而不是存储“可重用功能”的地方。 我想不出任何情况下您为什么要从操作中返回编辑后的值，但是如果您认为它有意义/它与状态有关，那么您可以这样做。