VUE

Vue-如何实现vuex模块化

2019-07-26  本文已影响5人  Renaissance_

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

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

cnpm install vuex

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

每个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);

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

上一篇下一篇

猜你喜欢

热点阅读