vuex模块化管理 state ,mutations ,actions ,getters

因为项目越写越大，之前就是直接在store下的index.js文件直接写状态和数据，然后越写越多，也不方便维护，现在抽时间把项目store分一下模块管理，不懂的同学建议多参考vue官网api

1.首先创建Module文件夹，根据自己项目的需求创建自己的模块

2.在index.js文件引入你创建好的模块

import Vue from "vue";
import Vuex from "vuex";

import createPersistedState from "vuex-persistedstate";
import users from "./modules/users.js"; //用户信息
import globalJson from "./modules/Json.js"; //系统配置
import chatMsg from "./modules/chatMsg.js"; //融云消息
import products from "./modules/products.js"; //产品相关
import searchCondition from "./modules/searchCondition.js"; //查询条件

Vue.use(Vuex);
// 导出 store 对象
export default new Vuex.Store({
  modules: {
    users,
    chatMsg,
    products,
    searchCondition,
    globalJson
  },
  plugins: [
    createPersistedState({
      storage: window.sessionStorage
    })
  ]
});

3.每个文件都有自己的state ,mutations ,actions ,getters ,然后就可以根据你项目的需求写存储数据了

const state = {};
const mutations = {};
const actions = {};
const getters = {};

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

4，state在需要用到的组件中引入方式

import { mapState } from "vuex";

computed: {
    ...mapState({
      hallCount: state => state.chatMsg.hallCount,
      userInfo: state => state.users.userInfo
    })
  },

总结：以上就是简单的vuex分模块化，其实很多东西官网都有写很详细，一定要多了解，还有就是在项目开发的时候，一定要考虑到后期维护的问题，像我这种项目快开发完了再去分模块化，导致很多地方报错需要修改，当然项目熟悉修改起来也快，总之还是在开发的过程中一定要多考虑考虑，文章写得不好，有不足之处还请大家指教，谢谢。