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

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();

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;
      }
    },
  },
};

<script>
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);
          }
        }
      });
    },
 },
 };
</script>