主页 / 问题 / 1223244
Accepted
doox911
Asked:2021-12-24 17:43:08 +0000 UTC2021-12-24 17:43:08 +0000 UTC

如何自动加载 Vuex 模块

  • 772

我在我的项目中使用Vue + Vuex。积累了很多vuex-модулей。现在它们都像这样连接：

import { module_1 } from 'Store/modules/module_1';
import { module_2 } from 'Store/modules/module_2';
...
import { module_n } from 'Store/modules/module_n';

命名模块和目录snake_case。

如何简化此操作或使此下载自动进行？

javascript

1 个回答

  1. Best Answer

    我将给出其中一种解决方案。

    目录结构：

    - store
- - modules
- - - module_1
- - - ...
- - - module_n
- - - - index.ts
- - - - actions.ts
- - - - getters.ts
- - - - mutations.ts
- - autoloader.ts
- - index.ts
- - types.ts

    类型（types.ts）：

    export type User {
  id: number
  name: string
  email: string
}

export interface UserState {
  users: User[]
}

export interface RootState {}

    模块示例：

    import { getters } from './getters'
import { actions } from './actions'
import { mutations } from './mutations'
import type { Module } from 'vuex'
import type { UserState, RootState } from '@/store/types'

const state: UserState = {
  users: [{
    id: 1,
    name: 'John Doe',
    email: 'jd@ya.ru'
  }],
}

const user: Module<UserState, RootState> = {
  namespaced: true,
  state,
  getters,
  actions,
  mutations,
}

export default user

    装载机：

    import type { Module } from 'vuex'
import type { RootState } from './types'

export type ModuleProperty = { 
  [key: string]: Module<object, RootState>
}

/**
 * @returns {ModuleProperty}
 */
export default function autoloader() {
  const modules: ModuleProperty = {}

  const context = require.context('./modules', true, /index\.ts$/i)

  context.keys().forEach((path) => {
    const find = /(?<module_name>\w+)\/index\.ts/.exec(path)

    const module_name = find?.groups?.module_name

    if (module_name) {
      const module = context(path)

      modules[module_name] = module.default
    }
  })

  return modules
}

    索引.ts

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

import autoloader from './autoloader'

import type { RootState } from './types'
import type { ModuleTree, StoreOptions } from 'vuex'

const modules: ModuleTree<RootState> = autoloader()

const store: StoreOptions<RootState> = {
  modules,
}

Vue.use(Vuex)

export default new Vuex.Store<RootState>(store)

    附加信息：

    • 0

相关问题