如何分解我的 vuex 文件？

Posted 2023-02-22

【中文标题】如何分解我的 vuex 文件？

【英文标题】：How do I break up my vuex file?

【发布时间】：2017-03-26 15:12:50

【问题描述】：

我有一个 vuex 文件，其中包含越来越多的变量，但我不确定将其拆分为不同文件的正确方法。

因为我有：

const store = new Vuex.Store( vuex stuff )，然后是我的主要 Vue 应用声明：const app = new Vue( stuff )

我很高兴使用 Vue 组件并且已经拥有很多组件，但这是应用程序顶层的东西，我不知道如何将其分解。任何建议表示赞赏。

【参考方案1】：

对于更多嵌套的模块，您可以在子模块中导出“模块”。

如何在子模块中暴露模块？

import Vuex from 'vuex';
import Vue from 'vue';
import actions from './actions';
import getters from './getters';
import mutations from './mutations';
import moudles from './moudles';

Vue.use(Vuex);

export const store = new Vuex.Store(
  state: 
    someObj: ,
  ,
  actions,
  getters,
  mutations,
  moudles,
);

└── src
    ├── assets
    ├── components
    └── store
       └─ modules
          └─ module1
              ├── state.js
              ├── actions.js
              ├── mutations.js
              ├── getters.js
              └── index.js
              ├── modules
                 |____moudleA （state.js.....）
                 |____moudleB （state.js.....）         
                  
         └─ module2
              ├── state.js
              ├── actions.js
              ├── mutations.js
              ├── getters.js
              └── index.js
   └─ index.js

更多详情请参考https://vuex.vuejs.org/guide/modules.html

【参考方案2】：

这是拆分商店并拥有不同模块的另一种选择，已经过测试。

结构

└── src
    ├── assets
    ├── components
    └── store
       └─ modules
          └─ module1
              ├── state.js
              ├── actions.js
              ├── mutations.js
              ├── getters.js
              └── index.js
         └─ module2
              ├── state.js
              ├── actions.js
              ├── mutations.js
              ├── getters.js
              └── index.js
   └─ index.js

store/index.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;

store/modules/module1/index.js

import actions from './actions';
import getters from './getters';
import mutations from './mutations';
import state from './state';


export default 
  state,
  actions,
  mutations,
  getters

store/modules/module2/index.js

import actions from './actions';
import getters from './getters';
import mutations from './mutations';
import state from './state';


export default 
  state,
  actions,
  mutations,
  getters

提示：不要忘记将您的商店导入您的 main.js

文档：https://vuex.vuejs.org/en/modules.html

【讨论】：

我怀疑这是否有帮助，甚至根本没有用。为了说服别人，请解释它是如何工作的以及为什么它应该解决问题。

它确实有效，它已经过测试。这分为不同的模块

OP 没有提到应用程序的模块化应用程序结构，但可能对其他用例比 OP 更复杂的人有用。

自从@bjbk already put a good modular example 以来，对于未来的读者来说，将您的 store/index.js 添加到现有响应中可能会更好、更整洁。还是您添加了我错过的其他内容？ :)

【参考方案3】：

我有这个结构：

└── store
          └─ module1
              ├── actions.js
              ├── mutations.js
              ├── getters.js
              └── index.js
   index.js 

您可以复制此示例代码： 来自 module1 的 index.js

    import actions from "./actions";
    import getters from "./getters";
    import mutations from "./mutations";
    
    import  state  from "./state";

    export default 
     state: () => state,
     actions,
     mutations,
     getters,
   ;

状态：

export let state = 
  themes: [],
;

吸气剂：

const themesList = (state) => 
  return state.themes;
;

行动：

const getThemesList = async ( commit ) => 
  
  commit(types.GET_THEMES, [values]);
;

突变：

const GET_THEMES = (state, themes) => 
  state.themes = themes;
;

然后在 store 的主 index.js 中放这个

const createStore = () => 
  return new Vuex.Store(
    modules: 
      module1: module1,
    ,
  );
;

export default createStore;

【参考方案4】：

您可以将此结构与动态加载存储模块一起使用。

src
└─ store
   └─ modules
      └─ [module-name].js
      └─ ...
   └─ index.js // <- your store main file

在index.js中

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// Load store modules dynamically.
const requireContext = require.context('./modules', false, /.*\.js$/)

const modules = requireContext.keys()
  .map(file =>
    [file.replace(/(^.\/)|(\.js$)/g, ''), requireContext(file)]
  )
  .reduce((modules, [name, module]) => 
    if (module.namespaced === undefined) 
      module.namespaced = true
    

    return  ...modules, [name]: module 
  , )

export default new Vuex.Store(
  modules
)

之后，只需将您的模块 [name].js 放在 modules 文件夹中，例如：auth.js:

// state
export const state = 

// getters
export const getters = 

// mutations
export const mutations = 

// actions
export const actions = 

要访问您的操作/获取器.. 您必须编写：

export default 
  computed: 
    ...mapGetters(
      method_1: '[module-name]/method_1',
      method_2: '[module-name]/method_2',
    ),
    method_with_arg()
      return this.$store.getters['[module-name]/method_with_arg'](this.n)
    
  ,
...

您可以找到 Cretu Eusebiu 的演示 here (laravel-vue-spa)。 谢谢。

【参考方案5】：

除了@bigsee's fine answer，如果使用index.js文件导出模块：

└── src
    ├── assets
    ├── components
    └── store
          └─ mymodule
              ├── state.js
              ├── actions.js
              ├── mutations.js
              ├── getters.js
              └── index.js

index.js

import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'

export default 

  state,
  getters,
  mutations,
  actions

getters.js

const getData = state => state.data

export 
  getData

与动作、突变和状态文件类似。

【参考方案6】：

对于那些想在不创建更复杂的模块化应用程序结构的情况下分解 Vuex 文件的人，我认为也可以像这样简单地将动作、突变和 getter 分解成单独的文件：

└── src
     ├── assets
     ├── components
     └── store
           ├── store.js
           ├── actions.js
           ├── mutations.js
           └── getters.js

store.js

import Vuex from 'vuex';
import Vue from 'vue';

import actions from './actions';
import getters from './getters';
import mutations from './mutations';

Vue.use(Vuex);

export const store = new Vuex.Store(
  state: 
    someObj: ,
  ,
  actions,
  getters,
  mutations,
);

actions.js

const actionOne = (context) => 
  ...
  context.commit('PROP1_UPDATED', payload);
;

const actionTwo = (context) => 
  ...
  context.commit('PROP2_UPDATED', payload);
;

export default 
  actionOne,
  actionTwo,
;

mutations.js

const PROP1_UPDATED = (state, payload) => 
  state.someObj.prop1 = payload;
;

const PROP2_UPDATED = (state, payload) => 
  state.someObj.prop2 = payload;
;

export default 
  PROP1_UPDATED,
  PROP2_UPDATED,
;

getters.js

const prop1 = state => state.someObj.prop1;
const prop2 = state => state.someObj.prop2;

export default 
  prop1,
  prop2,
;

...那么您可以使用通常的this.$store.dispatch('actionOne') 在您的组件中随意执行操作...

【讨论】：

这导致“getters 应该是函数，但模块“modulename”中的“getters.default”是 。”

在当前版本中，您不应该在导出时使用关键字“default”！！

我认为这是因为我为每个商店模块都有一个 index.js。我注意到导出了整个模块。

有趣。我用我的设置发布了一个有效的答案。使用 es6 - js 标准样式 - Quasar Framework v1 beta。无论如何，当你帮助我完成我的项目时，我 +1！干杯！

不客气 - 很高兴我能帮上忙！啊，也许你不得不删除default 部分，因为你使用import * as getters from ... 语法，而我只是import getters from ...？

【参考方案7】：

您可以将它们分成不同的模块。这样，您可以将所有相关的突变、getter、状态和操作保存在单独的文件中。文档解释得比我好：https://vuex.vuejs.org/en/modules.html

【讨论】：

不出所料，我尝试这样做导致第一个组件中的第一个 store.commit 出现 store is not defined 错误。

这还不够详细，无法提供任何帮助。

这是关于如何破解它的示例代码github.com/vuejs/vuex/tree/dev/examples/shopping-cart/store