vue中vuex的使用以及mapActions、mapMutations使用

一、安装vuex

npm install vuex --save     // 如果安装了淘宝镜像，可以使用 cnpm安装

二、建目录

• 关于module，它是对store的一个分割，将store分割成一个个小的模块，每个模块中又具有store完整的功能。他的使用主要面向一些状态非常多的大型应用
• 

这里建了入口index.js和modules目录，getters是为了方便获取状态,mutation-type为了管理方法

三、index.js中引入vuex

import Vue from 'vue';
import Vuex from 'vuex';
import getters from './getters'

Vue.use(Vuex);
const modulesFiles = require.context('./modules', true, /\.js$/)
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
const store = new Vuex.Store({
  modules,
  getters
})
export default store

四、user.js下分别建state、mutations、actions、getters

/**
 *  存放 用户 数据
 * **/
import FleetIdControllerApi from '@/api/FleetIdController';
import AuthorityGroupManage from '@/api/dataManages/AuthorityGroupManage';
import * as types from '../mutation-type'  // 引入定义的方法
// initial state
const state = {
  userInfo: {
    name: '调度员：小峰',
    scsFleetId: '',
    account: '',
    userId: '',
    license: [],
    roles: [71, 54],
  },
};

// getters
const getters = {
  userInfo(state) {
    return state.name;
  },
};

// actions
// 异步方法用actions
// actions不能直接修改全局变量，需要调用commit方法来触发mutation中的方法
const actions = {
  login(context, payload) {
    context.commit('login', payload);
  },
  logout(context) {
    context.commit('logout');
  },
  saveGlobalUserInfo(context, payload) {
    context.commit('saveGlobalUserInfo', payload);
  },
};
//解码
const decode = function(license) {
  if (typeof license === 'undefined') {
    license = 0;
  }
  let license_decoded = ('000000' + license.toString(2)).split('').reverse();
  var temp = [];
  let returnRules = (() => {
    var temp = [];
    license_decoded.forEach(function(value, index) {
      temp[index] = value === '1';
    });
    return temp;
  })();
  return returnRules;
};
//查询调度员权限信息
const queryUserLicense = function(id, fleetId, versionType) {
  AuthorityGroupManage.queryPossessLicense(
      {
        id: id,
        fleetId: fleetId,
        versionType: versionType,
      },
  ).then(res => {
    if (res.success) {
      var reslicense = res.obj;
      console.log('权限license权限license权限license权限license权限license');
      console.log(reslicense);
      state.userInfo.license = decode(reslicense);
    }
  }).catch(err => {
    // 异常情况
    console.log(err);
  });
};
// mutations
const mutations = {
  [types.SET_NUM](state, all) { //设置参数
    state.all = all;
  },
  login(state, payload) {
    // state.name = payload
    // localStorage.setItem(user_key, JSON.stringify(payload));
    //保存 用户登录时间
    let timespan = Date.parse(new Date());
    // localStorage.setItem(user_time, timespan);
  },
  logout(state) {
    state.userInfo = null;
    // localStorage.setItem(user_key, null);
  },
  [types.saveGlobalUserInfo](state, payload) {
    FleetIdControllerApi.getfleetId({
      userId: payload,
    }).then(res => {
      // 返回集团ID
      // this.scsFleetId = res.obj[0].fid;
      // this.user.userId = res.obj[0].user_id;
      state.userInfo.scsFleetId = res.obj[0].fid;
      state.userInfo.userId = res.obj[0].user_id;
      let license = res.obj[0].license;
      let scsFleetId = res.obj[0].fid;
      let userId = res.obj[0].user_id;
      state.userInfo.scsFleetId = res.obj[0].fid;
      state.userInfo.userId = res.obj[0].user_id;
      state.userInfo.licenseHigh = res.obj[0].licenseHigh;
      state.userInfo.licenseLow = res.obj[0].licenseLow;
      state.userInfo.managePriv = res.obj[0].managePriv;
      state.userInfo.userId = res.obj[0].user_id;
      state.userInfo.account = payload;
      // queryUserLicense(userId,scsFleetId,1)
      // queryUserLicense(93,scsFleetId,1)
      state.userInfo.license = decode(license);

    }).catch(err => {

    });
    // localStorage.setItem(user_key, null);
  },

};

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations,
};

五、main.js入口引入

六、调用

methods: {
      //vuex获取store中方法
      ...mapActions("user", ["login","logout"]),
      // ...mapActions({
      //   add: 'user/login' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
      // }),


      saveUserInfo(){
        //直接调用
        this.$store.dispatch("login","新名字");
        //通过mapActions获取方法调用
        console.log(this.login("casn"));
      },
      }

七、getters.js

const getters = {
  user: state => state.user,
  roles: state => state.user.userInfo.roles,
  license: state => state.user.userInfo.license,
  userInfo: state => state.user.userInfo,
}
export default getters

八、使用

console.log(this.$store.getters.user);
console.log("用户权限"+this.$store.getters.roles);
console.log(this.$store.getters.userInfo.license);

九、关于mapActions、mapMutations

• mapActions 必须放在 methods中，因为 action 或者 mutation 都是方法.

1. 文件中导入

import { mapActions ,mapMutations} from 'vuex';

      //vuex获取store中方法
      ...mapActions('user', ['login', 'logout']),
      ...mapActions({
        login: 'login', // 将 `this.login()` 映射为 `this.$store.dispatch('login')`
      }),
      ...mapMutations({
        login: 'login', // 将 `this.login()` 映射为 `this.$store.commit('login')`
      }),

      saveUserInfo() {
        //保存用户信息
        this.$store.dispatch('login', '新名字');
        this.login('casn');
      },