vuex模块化

安装

npm install vuex@next --save

main.js引用

//vue2
import store from '@/store';
const app = new Vue({
	store,
    ...App
})

//vue3
import store from "./store";
app.use(store);

store/index.js 入口文件

//vue2
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const mod = require.context('./modules', true, /\.js$/)
const modules = mod.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')// set './app.js' => 'app'
  const value = mod(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
export default new Vuex.Store({
  modules,
  getters,
})

//vue3
import { createStore } from "vuex";
import getters from "./getters";
const modulesFiles = import.meta.globEager("./modules/**/*.js");
const modules = {};
for (const key in modulesFiles) {
  modules[key.replace(/(\.\/modules\/|\.js)/g, "")] = modulesFiles[key].default;
}
export default createStore({
  getters,
  modules,
});

store/getters.js 配置读取项

const getters = {
//第一个xxx为子模块的文件名，第二个xxx为该子模块下state的参数
    getQQ: (state) => state.xxx.xxx,
}
export default getters

store/modules/xxx.js 子模块

export default {
  namespaced: true,
  state: {
    qq: "",
  },
  mutations: {
    setQQ(state, val) {
      state.qq = val;
    },
  },
  actions: {
    setQQ({ commit }, val) {
      commit("setQQ", val);
    },
  },
};

使用

//读取数据,xxx为getters.js配置的数据项
//vue2
this.$store.getters.xxx
//vue3
import { useStore } from "vuex";
const store = useStore();
store.getters.getQQ

//使用actions方法
//vue2
this.$store.dispatch("user/setQQ", qq);
//vue3
import { useStore } from "vuex";
const store = useStore();
store.dispatch("user/setQQ", qq);