Vuejs2 当多个组件在Vuex中使用相同的操作获取数据时，如何处理该状态？

我使用Vuex控制整个应用程序状态已经有一段时间了。但现在我面临着一个我从未遇到过的问题

工作流程如下所示：

[
    { typeid: 1, name: XXX },
    { typeid: 2, name: ZZZ },
    { typeid: 3, name: GGG },
    { typeid: 4, name: JJJ },
]

根组件将从我的数据库中获取数据，数据库是一个包含多个对象的数组

我创建了子组件，并使用v-for向用户显示该数组（这意味着，每个子组件稍后表示数组中的一个对象）

问题来了，当我尝试为每个子组件获取异步数据时，对于数据获取，我还需要来自我提到的数组的参数

我在子组件的已创建挂钩中使用Vuex操作。操作

fetch_sim_Type

将获取有效负载（这是来自父组件的参数，也来自初始阵列）。并在Vuex的

状态：{}

中更改状态

simType

通过使用计算的属性，我可以在我的子组件中获取获取的

simType

，并将其显示给用户。到目前为止一切正常

代码： 初始数组（父组件中的simSumArray）如下所示：

[
    { typeid: 1, name: XXX },
    { typeid: 2, name: ZZZ },
    { typeid: 3, name: GGG },
    { typeid: 4, name: JJJ },
]

父组件：

<template
    v-for="(singleSim, idx) in simSumArray"
>
    <sim-single :singleSim="singleSim"></sim-single>
</template>

在VUEX中：

state: {
    simType: 'unknown'
},
actions: {
    fetch_sim_Type (context, typeid) {
        //.. fetch the data based on typeid from DB
        context.state.simType = fetchedData;
    }
}

但它仅在对象存在时才在数组中起作用。当创建多个子组件时。Vuex store.js中的状态simType将被多次替换，并且在每个子组件中，simType（）总是相同的

这个问题有点难以描述核心问题是，Vuex中的状态意味着在整个应用程序中到处共享，因此如果我有多个子组件，它们都会自己获取数据，那么共享状态将一直被替换，我无法获取每个子组件的单独状态。

我不知道我是否描述了这个问题，克莱尔，但我真的尽力了。 也许有一种更好的方法可以在没有Vuex的情况下执行此数据获取工作，或者我只是使用了错误的Vuex

---

我相信这应该不是一个困难的问题。但是我在网上找不到任何相关的答案。

阅读您的代码，您描述的行为是正常的。我发现您的问题有两种解决方案（解决方案2可能更接近您想要的）：

解决方案1-在组件中存储simType

如果需要从组件内部以外的其他地方访问simType并将其存储在您的状态中，请跳到解决方案2

创建组件时，将simtype存储在组件的数据中。这看起来像这样：

[
    { typeid: 1, name: XXX },
    { typeid: 2, name: ZZZ },
    { typeid: 3, name: GGG },
    { typeid: 4, name: JJJ },
]

在您的组件中：

在vuex操作中：

解决方案2-将SIMTYPE存储在您的状态中，并按其ID编制索引

按id存储获取的simType，如下所示：

要检索simType，可以编写如下vuex getter：

因此，在您的示例中，计算方法为：

computed: {
    simType () {
        console.log("store.getters.getSimTypeById(this.singleSim.typeid): ", store.getters.getSimTypeById(this.singleSim.typeid)
        return store.getters.getSimTypeById(this.singleSim.typeid);
    }
},

---

作为奖励，此解决方案允许您在多个项目具有相同simType的情况下仅获取一次simType

我成功地将共享数据保存在Vuex存储中，并从我的组件中查看数据

虽然不是一种最佳实践，但有时我甚至懒得使用操作或提交来更改状态，而只是直接修改状态。在这个场景中，Vuex就像我所有组件的共享

数据
对象

Vue商店

state: {
   myvalue: []
}

组成部分

watch: {
  '$store.state.myvalue'(value) {
  }
}

谢谢你的回答，这是一个非常好的解释很好的答案。我为自己选择了解决方案2。这一切都很好，但获取获取数据的getter实际上是错误的。使用返回状态.simTypes[typeId]
我得到了“未定义”。我也在谷歌上搜索过。最后，我使用
context.state.simTypes.push（{“typeid”：typeid，“simType”：simType}）稍微更改了一些操作并使用
返回state.simTypes.find（simType=>simType.typeid==typeid）
完成所有工作！终于！非常感谢。对于getter，我真的没有办法测试我现在写的东西，谢谢你纠正：）尽管这可能是因为你的
simTypes
仍然是一个数组而不是一个对象？不管怎样，很高兴你成功了
computed: {
    simType () {
        console.log("store.getters.getSimTypeById(this.singleSim.typeid): ", store.getters.getSimTypeById(this.singleSim.typeid)
        return store.getters.getSimTypeById(this.singleSim.typeid);
    }
},

state: {
   myvalue: []
}

watch: {
  '$store.state.myvalue'(value) {
  }
}