Question

一段时间以来，我一直在使用Vuex来控制我的整个应用程序状态。但是现在我面临着一个我从未遇到过的问题。

工作流程如下：

根组件将从我的数据库中获取数据，该数据库是其中包含多个对象的数组。
我创建了子组件，并使用v-for向用户展示此数组（这意味着以后每个子组件都代表该数组中的一个对象）
问题来了，当我尝试为每个子组件获取异步数据时，为了进行数据获取，我还需要来自我提到的数组的参数。
我在创建的子组件挂钩中使用Vuex动作。动作fetch_sim_Type将获取有效负载（这是父组件的参数，也是初始数组的参数）。并在Vuex的simType中更改状态state: {}。
通过使用计算出的属性，我可以在子组件中获取提取的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>

儿童成分：

props: ['singleSim'],
created () {
    store.dispatch('fetch_sim_Type', this.singleSim.typeid);
},
computed: {
    simType () {
        console.log("store.getters.get_simType: ", store.getters.get_simType)
        return store.getters.get_simType;
    }
},

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

我确信这不是一个难题。但是我找不到在线的相对答案。

Answer 1

阅读代码，您描述的行为是正常的。我看到了两种解决您的问题的方法（解决方案2可能更接近您要寻找的内容）：

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

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

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

在您的组件中：

data () {
    return {
       simType: undefined //declare simType as one of your component's data property
    }
},
created () {
    store.dispatch('fetch_sim_Type', this.singleSim.typeid).then(simType => {
        this.simType = simType //store the fetched simType
    })
}

在vuex操作中：

actions: {
    fetch_sim_Type (context, typeid) {
        //.. fetch the data based on typeid from DB
        return fetchedData //pretty much the same except return the result
    }
}

解决方案2-将simTypes存储在按其ID索引的状态中

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

state: {
    simTypes: {} //simTypes is now plural, and is an empty object at first. It will later contain several simTypes, indexed by their respective Ids
},
actions: {
    fetch_sim_Type (context, typeid) {
        //.. fetch the data based on typeid from DB
        context.state.simType[typeid] = fetchedData; // a fetched simtyped will be store in simTypes and can be accessed with the typeid as a key
    }
}

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

getters: {
  getSimTypeById: (state) => (typeId) => {
    return state.simTypes[typeId]
  }
}

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

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。

Answer 2

通过将共享数据保存在Vuex存储中并从组件中查看数据，我获得了成功。

尽管这不是最佳实践，但有时我什至不理会使用操作或提交来更改状态，而只是直接修改状态。在这种情况下，Vuex就像我所有组件的共享data对象一样。

Vue商店

state: {
   myvalue: []
}

组件

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

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

代码：

2 个答案: