vuex的用法详解，含模块化及辅助函数（mapState, mapMutations, mapActions, mapGetters）

一、目录结构：

index.js
modules
    config.js
    path.js
    ···

二、index.js文件

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex);

const modulesFiles = import.meta.glob('./modules/*.js', { eager: true }); // 异步方式

// Vite扫包方式
let modules = {};
for (const [key, value] of Object.entries(modulesFiles)) {
  var moduleName = key.replace(/^\.\/(.*)\.\w+$/, '$1');
  const name = moduleName.split('/')[1];
  modules[name] = value.default;
}

export default new Vuex.Store({
  modules,
  state: {},
  mutations: {},
  actions: {},
  plugins:
    import.meta.env.VITE_ENV === 'production'
      ? []
      : [
          // 需要localStorage存储起来的模块
          createPersistedState({
            storage: window.localStorage,
            paths: ['config'],
          }),
          // 需要sessionStorage存储起来的模块
          createPersistedState({
            storage: window.sessionStorage,
            paths: ['path'],
          }),
        ],
});

三、path.js

export default {
  namespaced: true,
  modules: {},
  state: {
    loading: window.globalLoading,
    videoVisible: false,
  },
  mutations: {
    setLoading(state, value) {
      state.loading = value;
    },
    updateVideoVisible(state, value) {
      state.videoVisible = value;
    },
  },
  actions: {
    pageLoad({state, rootState, commit}, params) {
      commit('setLoading', false);
      commit('setLoading', params);
    },
    async initData({state, rootState, commit}, params) {
      return new Promise(resolve=>{+
        // 请求接口
        ApiGetInfo().then(res=>{
          commit('setLoading', params);
          resolve();
        })
      })
    },
  },
  getters: {
    getLoading: state => value => {
      return {
        data1: value,
        data2: state.loading.
      }
    }
  }
};

四、辅助函数

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
export default {
  name: 'name',
  components: {
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  computed: {
    ...mapState('path', ['videoVisible']),
    ...mapGetters('path', ['getLoading']),
  },
  methods: {
    ...mapMutations('path', ['setLoading']),
    ...mapActions('path', ['initData']),
  },
};