vue3 vuex 导入多个store

在Vue 3中，Vuex 是一个用于管理应用状态的模块化工具，它允许你在单个应用中集中存储和管理数据。如果你想导入并使用多个 store，可以按照以下步骤操作：

1. **创建多个 Store**：
- 首先，为每个需要单独管理的状态创建一个独立的 Vuex Store 文件，例如 `store1.js` 和 `store2.js`。

// store1.js
import { createStore } from 'vuex'
export const store1 = createStore({
  state: {
    // store1 的初始状态
  },
  mutations: {},
  actions: {},
})

// store2.js
import { createStore } from 'vuex'
export const store2 = createStore({
  state: {
    // store2 的初始状态
  },
  mutations: {},
  actions: {},
})

2. **在主应用文件中引入并配置**：
- 在 Vue 应用的入口点（如 App.vue 或 main.js），你可以导入并全局注册这些 store。通常，我们会把它们放在一个数组里以便管理。

import store1 from './store/store1'
import store2 from './store/store2'

const stores = [store1, store2] // 将所有 store 放在一个数组中

Vue.use(Vuex)
const appStore = new Vuex.Store({
  modules: {
    // 使用 mapModules 功能合并多个 store
    combinedStores: stores.reduce((acc, cur) => ({ ...acc, ...cur }), {}),
  },
})

export default appStore

在这个例子中，`combinedStores` 就会包含来自 `store1` 和 `store2` 中的所有状态、mutation 和 action。