vue中store模块化

在进行书写store时，我们会分模块来管理我们的各个部分，我们会创建如下图目录。\

注意： 每个模块中namespaced: true是不可或缺的。

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

1.下面来写一下index.js中的代码

import { createStore } from 'vuex'

const modulesFiles = import.meta.globEager('./modules/*.js')
const modules = Object.entries(modulesFiles).reduce((modules, [path, mod]) => {
  const moduleName = path.replace(/^\.\/modules\/(.*)\.\w+$/, '$1')
  modules[moduleName] = mod.default
  return modules
}, {})

export default createStore({
  modules,
})

2.js文件中store使用

导入：import store from '@/store'
读取：store.state.app.title

2.vue文件中store使用

1. 导包： import { useStore } from 'vuex'
2. 初始化：const store = useStore()
3. 使用：store.dispatch('app/setScreenCode', 传参)