vuex模块化

vuex模块化

目录结构如下：

• types.js 内定义常量，使用常量替代 mutation 事件类型
• user.js 内写该 user 组件内用到的 state 、 getters 、 actions 和 mutations，并最后统一导出（类似上个例子中的 store.js ）
• getters.js 内写原来的 getters ，用来获取属性
• actions.js 内写原来的 actions ，就是要执行的动作，如流程的判断、异步请求
• index.js 是用来组装 actions.js 、 getters.js 、user.js 的，然后进行统一的导出

创建store文件夹, 创建index.js 作为vuex的入口js

 import app from './modules/app'
    import user from './modules/user'
    import getters from './getters'
    import dept from "./modules/dept";
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      modules: {
        app,
        user,
        dept
      },
      getters
    })
    
    export default store
    
    -------------------------------------------------------------------------------------
    
    import Vue from 'vue';
    import Vuex from 'vuex';
    import getters from './getters';
    
    Vue.use(Vuex);
    
    // 获取 ./modules文件夹下面所有的js文件名称
    const modulesFiles = require.context('./modules', true, /\.js$/);
    
    // you do not need `import app from './modules/app'`
    // it will auto require all vuex module from modules file
    const modules = modulesFiles.keys().reduce((arr, modulePath) => {
      // set './app.js' => 'app'
      const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
      const value = modulesFiles(modulePath);
      arr[moduleName] = value.default;
      return arr;
    }, {});
    
    export default new Vuex.Store({
      modules,
      getters
    });

如上图中,将vuex划分成三个模块,每一个模块都拥有自己的action, mutation, state组件

创建vuex的子模块, user.js , 编码如下: 注意点就是要开启命令空间模式, namespaced=true , 因为现在的store被划分成了多模块,每一个模块都有自己的state,所有在mapXXX使用时,需要指定使用的是哪个模块下的state

    // 利用vuex存储token的例子
    import { setToken } from '@/utils/auth.js';
    import { login } from '@/api/login';
    import { TipsPop } from '@/utils/tool';
    const state = {
      token: ''
    };
    
    const mutations = {
      // 设置token
      SET_TOKEN(context, data) {
        context.token = data;
      }
    };
    
    const actions = {
      // 设置token
      async setKey(context, data) {
        await context.commit('SET_TOKEN', data);
      },
      // 用户登录
      async userLogin(context, data) {
        let { username, password, isNoLogin = false } = data;
        if (isNoLogin) {
          setToken(1);
          return true;
        }
        let user = await login({ username, password });
        if (user.code !== 200) {
          TipsPop({
            message: '网络出错',
            type: 'error'
          });
          return false;
        }
        setToken(user.access_token);
        return true;
      }
    };
    
    export default {
      state,
      mutations,
      actions
    };

如图,如果不划分模块,我们有两种方法,可以这样,$store.state.属性 或者 $store.getters取出state中的值使用,划分模块后,推荐使用通过名称空间映射的方式映射出不同模块的State再使用

所以需要再创建getters.js

    const getters = {
      token: state => state.user.token
    };
    export default getters;

辅助函数的使用

    import {mapState,mapMutations,mapActions,mapGetters} from "vuex"

• state的辅助函数需要映射到计算属性中computed，映射的名称一定要相同，然后就可以通过this访问到state

     computed:{
            ...mapState(["name"]),//name和vuex中的state保持一至。
        },
    methods：{
      click(){
        console.log(this.name)//访问到vuex的name
      }
    }

• mutation的辅助函数mapMutations把mutations里面的方法映射到methods中。映射的名称一定要相同，然后就可以通过this调用mutaition的方法。

     mutations: {
        show(state){
          console.log(state)
        }
      },
    
    
     methods:{
            ...mapMutations(["show"]),
            click(){
                this.show()
            },
    }

• mapAcions：把actions里面的方法映射到methods中
• mapGetters:把getters属性映射到computed身上