如何将 2 个 vuex 商店合并为一个商店

Posted 2023-02-22

【中文标题】如何将 2 个 vuex 商店合并为一个商店

【英文标题】：How to combine 2 vuex stores into a single store

【发布时间】：2022-01-03 22:01:32

【问题描述】：

您好，我需要将 2 个 vuex 商店合并为一个商店（两个商店属于不同的项目）

import storeA from '/path';

import storeB from '/path';

现在合并了两个商店

const combinedStore = //combine logic as i don't know this logic

我在***上搜索了很多以结合2个vuex商店，但我没有找到任何发布的解决方案。

这是我的vuex 商店在stores 中的样子

商店 1：

   // storeA.js
    
    const store = 
        state()return ,
        actions: async getData()...,
        mutations: ,
        getters: , 
        modules: 
           Login
        
    

商店 2：

   // storeB.js
    
    const store = 
        state()return ,
        actions: async getUsers()...,
        mutations: ,
        getters: , 
        modules: 
           workflow
        
    

这是我的尝试：

import StoreA from 'storeA.js';
import StoreB from 'storeB.js';

const newStoreData = Object.assign(,StoreA,StoreB)

const newStore = new Vuex.Store(
    ...newStoreData
);

现在只有 1 个商店可以工作，其他商店会抛出类似的错误

读取未定义的名字（即state.[module].first_name）

问题可以在这里重现：https://codesandbox.io/s/vuex-playground-forked-1h344?file=/src/main.js

原始工作分叉： https://codesandbox.io/s/k012qvkmnv?file=/src/main.js

【问题讨论】：

你不能合并两个上下文错误的存储，但是你可以合并两个模块，其中每个模块可以有自己的状态、getter、突变和动作。

在此示例中创建了 2 个单独的商店，这正在重现我的问题 codesandbox.io/s/vuex-playground-forked-1h344?file=/src/App.vue 此处的原始工作代码 codesandbox.io/s/k012qvkmnv

【参考方案1】：

Vue 3+

情人版大概也有这种方法，但我不确定。

import StoreA from 'storeA.js';
import StoreB from 'storeB.js';

const newStore = new Vuex.Store(storeA);

newStore.registerModule('', storeB)

我刚刚修改了store2.js和main.js文件

已解决问题的链接：https://codesandbox.io/s/vuex-playground-forked-6pg4w?file=/src/main.js

这是一个关于它的文档：https://vuex.vuejs.org/guide/modules.html#dynamic-module-registration

【讨论】：

得到 错误 Uncaught TypeError: Object(...) is not a function 尽管按照您的步骤操作

@EaB 你在使用 vuex 4+ 吗？

...@Mises 我正在使用"vuex": "^3.6.0"

@EaB 为版本 3.x 编辑

...@Mises 这种组合我已经知道的 2 个模块的方法。如果我已经为每个插件提供了专用模块，则此解决方案不灵活。在核心方面，我们需要再次定义模块。然后更改插件中的整个代码（像这样访问store.state.a）。如果我们记住我的插件可以在任何地方使用，这不是灵活的解决方案。