vite vue3 vuex配置及动态加载

项目目录结构为store 放置vuex文件

• index.js 为总配置文件及动态导入后续js
• modules文件夹放其余业务逻辑文件js

• getters.js

  
  
  项目目录

index.js 逻辑代码

import { createStore } from 'vuex'
import getters from './getters'

// vite 查找对应文件下所有*.js文件 因与node区别
const modulesFiles = import.meta.globEager('./modules/*.js')
let modules = {}
for(const file in modulesFiles){
  modules[file.replace(/(\.\/modules\/|\.js)/g, '')] = modulesFiles[file].default
}

const store = createStore({
  modules,
  getters
})

export default store

modules 部分业务代码

• demoApi 测试接口
• return dispatch()调用另外store方法如不在同一个store内,则需要填写完整路径xxx/xxxx并增加参数{root:true}

import {demoApi} from '../api'
const state = {
  
}

const mutations = {
  
}

const actions = {
    async demoActions({ commit, dispatch}){
            const response = await demoApi();
            return dispatch('response/response_return_value', response, {root: true})
    }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}