美文网首页VUE
Vue-如何实现vuex模块化

Vue-如何实现vuex模块化

作者: Renaissance_ | 来源:发表于2019-07-26 13:04 被阅读5次

    就像React的生态系统有redux一样,vue的生态系统中的一员vuex也扮演着重要的角色。由于现在很多优秀的博客都介绍了vuex的原理以及基本用法,因此本文不会在此赘述。而是依据笔者的项目,简单介绍如何实现vuex模块化。

    Vuex 入门,这是笔者浏览的一篇不错的入门文章。

    • 安装

    cnpm install vuex
    
    • 模块处理

    在src目录下新增store文件夹,然后新增modules文件夹,存放每个模块的状态管理文件,然后新增action.js,getters.js,index.js,mutation.js,types.js

    每个js含义如下

    • types.js 内定义常量来表示事件类型
    • user.js 内写该 user 组件内用到的 state 、 getters 、 actions 和 mutations,并最后统一导出
    • getters.js 内写原来的 getters ,用来获取属性
    • actions.js 内写原来的 actions ,就是要执行的动作,如流程的判断、异步请求
    • index.js 是用来组装 actions.js 、 getters.js 、user.js 的,然后进行统一的导出

    以用户信息模块为例子,user.js内容如下:

    import types from '@/store/types'
    
    const state = {
      userName : '' || localStorage.getItem("userName"),
      userId: '' || localStorage.getItem("userId"),
      isSignin: false || localStorage.getItem("isSignin"),
      userRole: '' || localStorage.getItem("userRole"),
    }
    
    var getters = {
      userName: (state) => state.userName,
      userId: (state) => state.userId,
      isSignin: (state) => state.isSignin,
      userRole: (state) => state.userRole,
      isAdmin(state) {
        return typeof state.userRole != 'undefined' && state.userRole != null && state.userRole.indexOf("ROLE_ADMIN") >=0
      },
      isUser(state) {
        return typeof state.userRole != 'undefined' && state.userRole != null && state.userRole.indexOf("ROLE_USER") >=0
      }
    }
    
    const actions = {
      setUserInfo(context, userinfo){
        if(typeof userinfo != 'undefined' && typeof userinfo.userId != 'undefined'
            && typeof userinfo.userName != 'undefined' ){
          context.commit(types.SETUSERINFO,userinfo);
        }
      },
      clearUserInfo(context){
        context.commit(types.CLEAR_USERINFO);
      }
    }
    
    const  mutations = {
      [types.SETUSERINFO](state, userinfo){
          state.userName = userinfo.userName;
          state.userId = userinfo.userId;
          state.isSignin = userinfo.isSignin;
          state.userRole = userinfo.userAuthorities;
          localStorage.setItem("userId", userinfo.userId);
          localStorage.setItem("userName", userinfo.userName);
          localStorage.setItem("isSignin", userinfo.isSignin);
          localStorage.setItem("userRole", userinfo.userAuthorities);
      },
      [types.CLEAR_USERINFO](state){
        state.userName = '';
        state.userId = '';
        state.isSignin = false;
        state.userRole = '';
        localStorage.setItem("userId","");
        localStorage.setItem("userName","");
        localStorage.setItem("isSignin", false);
        localStorage.setItem("userRole", '');
      }
    }
    
    export default {
      state,
      getters,
      actions,
      mutations
    }
    
    
    

    从user.js中,笔者定义了state,getters,actions,mutations。通过vuex的getters可以获取定义的状态state。如果要操作状态,则要触发actions 提交mutations修改状态。

    type.js内容如下:

    
    const SETUSERINFO = "SETUSERINFO";//设置登录用户信息
    const CLEAR_USERINFO = "CLEAR_USERINFO";//清除用户信息
    
    export default {
      SETUSERINFO,
      CLEAR_USERINFO
    }
    
    

    index.js内容如下,module允许我们模块化管理状态:

    import Vue from 'vue'
    import vuex from 'vuex'
    Vue.use(vuex)
    
    import getters from './getters'
    import actions from './actions'
    import mutations from './mutations'
    import user from './modules/user'
    
    export default new vuex.Store({
      getters,
      actions,
      mutations,
      modules: {
        user
      }
    })
    
    

    其它js中暂未使用到,所以暂未列出

    • 引入

    在main.js中引入

    import store from './store/index'
    
    new Vue({
      el: '#app',
      router,
      i18n,
      store,
      components: { App },
      template: '<App/>'
    })
    
    • 使用

    前面的准备工作完成后,我们就可以在组件中使用了。

    获取状态,比如要获取用户是否为管理员,是管理员才显示管理菜单:

    <el-col :span="4" v-show="$store.getters.isAdmin">
        <el-menu-item index="/manage/case">{{ $t("menuName.caseManage") }}</el-menu-item>
    </el-col>
    

    修改状态,比如登陆后设置用户的信息,登陆其它的代码在此省略了:

     var userinfo = response.data.result;
     userinfo.isSignin = true;
     this.$store.dispatch("setUserInfo", userinfo);
    
    • 总结

    本文简单介绍了如果在项目中模块化管理状态,统一配置管理不仅有助于我们的协同开发,也有利于提高代码的可读性。

    相关文章

      网友评论

        本文标题:Vue-如何实现vuex模块化

        本文链接:https://www.haomeiwen.com/subject/abvrrctx.html