vuex模块化

首先需要安装vuex

cnpm install vuex

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

 }

})

在main.js中引入

import store from './store/index'


new Vue({

  el: '#app',

  router,

  i18n,

  store,

  components: { App },

  template: ''

})

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

    {{ $t("menuName.caseManage") }}

修改状态,比如登陆后设置用户的信息:

var userinfo = response.data.result;

userinfo.isSignin = true;

this.$store.dispatch("setUserInfo", userinfo);

你可能感兴趣的:(vuex模块化)