模块 vs 多个 vuex 存储文件

Posted 2023-02-22

【中文标题】模块 vs 多个 vuex 存储文件

【英文标题】：Modules vs Multiple vuex store files

【发布时间】：2022-01-22 19:05:48

【问题描述】：

我正在做一个使用 vue 和 vuex 的项目。而且我认为大多数人都遇到了问题，有时 store.js（或 index.js）变得太大了。所以我想拆分 store.js 文件。经过一些谷歌我发现我可以使用模块来克服这个问题。但是我也尝试过创建一个新的 vuex 实例，它工作得很好。

Single instance with modules :
---store.js
import Vuex from "vuex";
import thisismodule1 from "./modules/module1";
import thisismodule2 from "./modules/module2";

const createStore = () => 
  return new Vuex.Store(
    modules: 
      module1: thisismodule1,
      module2: thisismodule2

    
  );
;

export default createStore;
const store = new Vuex.Store(
module
);



Multiple files with multiple instances:
---storeCar.js
---storeHouse.js
---storeTree.js
...

所以我的问题是，这是允许的还是我必须使用具有单个实例的模块？

提前谢谢你！

【参考方案1】：

有一个最佳实践：

创建一个文件。那是共享的名字

创建一个Store文件夹并在其上创建一个modules文件夹：

您应该将模块放在模块文件夹中并为目标定义您的商店：

例如：

import * as types from "../types";

const state = 
  currentPage: 
;
const getters = 
  [types.avatarManagement.getters.AVATAR_MANAGEMENT_GET]: state => 
    return state.currentPage;
  
;

const mutations = 
  [types.avatarManagement.mutations.AVATAR_MANAGEMENT_MUTATE]: (
    state,
    payload
  ) => 
    state.currentPage = payload;
  
;

const actions = 
  [types.avatarManagement.actions.AVATAR_MANAGEMENT_ACTION]: (
     commit ,
    payload
  ) => 
    commit(types.avatarManagement.mutations.AVATAR_MANAGEMENT_MUTATE, payload);
  
;

export default 
  state,
  getters,
  mutations,
  actions
;

创建 index.js 以定义 Vuex 并导入您的模块：

index.js 文件：

import Vue from "vue";
import Vuex from "vuex";
import avatarManagement from "./modules/avatarManagement";

Vue.use(Vuex);

export default new Vuex.Store(
  modules: 
    avatarManagement
  
);

5) also you can types of your vuex store on Type.js file:

type.js:



        export const avatarManagement = 
      getters: 
        AVATAR_MANAGEMENT_GET: "AVATAR_MANAGEMENT_GET"
      ,
    
      mutations: 
        AVATAR_MANAGEMENT_MUTATE: "AVATAR_MANAGEMENT_MUTATE"
      ,
    
      actions: 
        AVATAR_MANAGEMENT_ACTION: "AVATAR_MANAGEMENT_ACTION"
      
    ;

***用于从 Store 获取数据：

  computed: 

    ...mapGetters(
      registrationData:types.avatarManagement.AVATAR_MANAGEMENT_GET,

    getDataFromStore() 
      return this.registrationData;
    

***for Change data to Store and mutate that:


      methods: 
        goToActivity() 
          const activity = 
            companyList: this.categories
          ;
          this.$store.commit(types.avatarManagement.AVATAR_MANAGEMENT_MUTATE, 
            newData
          );
        ,
    

【讨论】：

非常感谢！啊，这么多实例不是一个好习惯吗？还有一个愚蠢的问题，在其他示例中，我们需要 const store = new vuex.store,... 在您的导出默认情况下，我如何访问 avatarManagment 中的状态？

不客气。我所说的 ViewGS 中的 store 实际上是编写模块化 store 的最佳方法之一。现在我将回答您如何从商店中读取信息以及如何将新信息存储在商店中：

要从商店中读取数据，您必须在计算机部分的组件内输入以下代码以从中读取最新信息

谢谢！但我不太理解你的意思，所以例如在 index.js 中，我的模块 ava​​tarManagment 有一个导出默认值...我将 index.js 导入到例如vue 组件...并且想要访问模块，我是否必须这样做：从 ./index.js store._modules.avatarManagment.state 导入存储。当前页面？最好的问候！

啊我刚看到新代码！谢谢\