vuex 中getters、mutations、actions的使用实例

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import base from './modules/base';
import user from './modules/user';

Vue.use(Vuex);// store创建工厂class storeFactory {  static getInstance = () => {    const store = new Vuex.Store({
      modules: {        base,
        user
      },
    });    return store;
  }
}

export default storeFactory.getInstance();

 

 user.js文件：

import storage from 'storejs';
import userAPI from '../../api/user';/* eslint-disable */export default {
  namespaced: true,
  state: {
    activeFlag: true,
    searchInfo: {}, // 活动列表筛选值
    caseCheckInfo: {}, // 案例审核列表筛选值
    isLogin: false, // 是否登录
    userInfo: {}, // 用户信息
    menuList: [], // 菜单列表
    areaList: [],//专区列表
    curMenuName: '', // 当前选择的菜单名称
    curMenuButtonList: [], // 当前选中页面可用按钮的集合    departmentList:[],
    positionList:[]

  },
  getters: {
    caseCheckInfo: state => state.caseCheckInfo,
    activeFlag: state => state.activeFlag,
    searchInfo: state => state.searchInfo,    // 是否已经登入
    isLogin: state => state.isLogin,// 用户信息
    userInfo: state => state.userInfo,
  },
  mutations: {
    updateUserInfo(state, activeFlag) {
      let storageMy = storage(process.env.GLOBAL_COOKIE_NAME);      if (!storageMy) {
        storageMy = {};
      }      const myUserInfo = storageMy.userInfo ? storageMy.userInfo : {};
      myUserInfo.activeFlag = activeFlag;
      console.info('object', myUserInfo.activeFlag);      const newStorage = { userInfo: myUserInfo };
      storage({ [process.env.GLOBAL_COOKIE_NAME]: newStorage });
      state.userInfo = myUserInfo;
    },    changeActive(state, flag) {
      state.activeFlag = flag;
    },  // 加载用户信息    loadUserInfo(state) {      //  读取storage
      const storageMy = storage(process.env.GLOBAL_COOKIE_NAME);      if (storageMy) {        // 如果有userInfo则认为已经登陆了
        if (storageMy.userInfo) {
          state.userInfo = storageMy.userInfo;
          state.activeFlag = state.userInfo.activeFlag == 2;
          state.isLogin = true;          return;
        }
        state.userInfo = {};
        state.isLogin = false;
      }
      state.userInfo = {};
      state.isLogin = false;
    },
  },
  actions: {    // 保存用户信息    save({ state, commit, dispatch }, { userInfo }) {      //  读取storage
      let storageMy = storage(process.env.GLOBAL_COOKIE_NAME);      if (!storageMy) {
        storageMy = {};
      }      const myUserInfo = storageMy.userInfo ? storageMy.userInfo : {};
      myUserInfo.token = userInfo.token ? userInfo.token : myUserInfo.token;
      myUserInfo.userId = userInfo.userId ? userInfo.userId : myUserInfo.userId;
      myUserInfo.userName = userInfo.userName ? userInfo.userName : myUserInfo.userName;
      myUserInfo.mobile = userInfo.mobile ? userInfo.mobile : myUserInfo.mobile;
      myUserInfo.companyCode = userInfo.companyCode ? userInfo.companyCode : myUserInfo.companyCode;
      myUserInfo.areaCode = userInfo.areaCode ? userInfo.areaCode : myUserInfo.areaCode;
      myUserInfo.areaName = userInfo.areaName ? userInfo.areaName : myUserInfo.areaName;
      myUserInfo.companyName = userInfo.companyName ? userInfo.companyName : myUserInfo.companyName;
      myUserInfo.logoUrl = userInfo.logoUrl ? userInfo.logoUrl : '';
      myUserInfo.activeFlag = userInfo.activeFlag ? userInfo.activeFlag : '';
      myUserInfo.userCode = userInfo.userCode ? userInfo.userCode : '';
      let newStorage = { userInfo: myUserInfo };
      storage({ [process.env.GLOBAL_COOKIE_NAME]: newStorage });
      state.userInfo = myUserInfo;      commit('changeActive', state.userInfo.activeFlag == 2);
      state.isLogin = true;      if (userInfo.areaCode) {        dispatch('updateInfo');
      }
    },async updateInfo() {      try {        const res = await userAPI.updateInfo({});
        console.log(res);
      } catch (error) {        this.$message.error(error.message || error);
      }
    },    // 登出
    async loginOut({ state }) {      try {
        storage({ [process.env.GLOBAL_COOKIE_NAME]: '' });
        state.userInfo = {};
        state.isLogin = false;
      } catch (error) {
        console.log('登录失败', error);        throw error;
      }
    },
  },
};

 

index.vue文件:中的使用

import { mapGetters,mapActions, mapMutations } from 'vuex';export default {
name:'index',
data(){},
created:{},

computed: {
    ...mapGetters({      userInfo: "user/userInfo",
      activeFlag: "user/activeFlag",
    })
  },

methods: {
    ...mapActions({
      userLogin: 'user/login',
      saveInfo: 'user/save',
    }),    //vue中修改store中数据只能通过mutations
    ...mapMutations({      changeActive: 'user/changeActive',      updateUserInfo: 'user/updateUserInfo',
    }),
    openDialog() {      this.changeActive(true);
    },
    closeDialog() {      this.changeActive(false);
    },    //修改密码    sumbit() {      this.$refs['ruleForm'].validate(async (valid) => {        if (valid) {          if (this.update.password !== this.update.checkPassword) {            this.$message.error('两次输入密码不一致');            return;
          }          this.update.mobile = this.userInfo && this.userInfo.mobile || '';          try {            //调完修改接口  掉获取userInfor接口  判断activeFlag==1才能关闭弹框
            const neUserInfo = await userAPI.updatePassword(this.update);            const resData = neUserInfo.data;            this.changeActive(false);            this.updateUserInfo(resData.activeFlag);
          } catch (error) {            this.$message.error(error);
          }
        }
      });
    },
 },
 };" _ue_custom_node_="true">