VUEX

/ 前端 / Vue / VUEX

state

东西都存在state中

Mutation

更改state的唯一方式，store.commit('increment') 触发。相当于一个回调函数

•

不能有异步方法，也就是 then permission 那些

•

store.commit('status/SET_RELOGIN', false); 模块化之后在模块之外调用要加上模块名 import store from '@/store'

action

里面可以有异步方法。

使用

store.commit("permission/SET_MENUS", null);
this.$store.dispatch('user/login', this.loginForm).then();
this.$store.getters.lastPage;

vue/src/store/modules/permission.js

import {asyncRoutes, constantRoutes, resetRouter} from '@/router'
import {getMenu} from "@/api/menu";
import router from '../../router'
import Layout from "@/layout/index";

const state = {
  perms: [],
  menus: [],
};

export function makeTree(res, keys) {
  let tree = [];
  for (let resKey in res) {
    if (res[resKey].pId === 0) {
      findKey(resKey, res, keys);

      tree.push(res[resKey]);
      // res.splice(resKey, 1)
    }
  }
  return tree;
}


const mutations = {
  SET_MENUS: (state, menus) => {
    state.menus = menus;
  },
  SET_PERMS: (state, perms) => {
    state.perms = perms;
  }
};

const actions = {
  generateRoutes({commit}, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('admin')) {
        accessedRoutes = asyncRoutes || []
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes);
      resolve(accessedRoutes)
    })
  },
  conductMenuTree({commit}, menuList) {
    //把权限列表分成 按钮权限 和 菜单.
    let menus = [];
    let perms = [];
    for (let i = 0; i < menuList.length; i++) {
      if (menuList[i].type === 1)
        perms.push(menuList[i]);
      else {
        console.log(components[menuList[i].component]);
        //todo:判断有没有组件
        let comp = components[menuList[i].component];
        if (comp) {
          menuList[i].component = () => comp;
          menus.push(menuList[i]);
        } else {
          console.log("找不到组件:" + menuList[i].component)
        }
      }
    }
    //存储所有的按钮权限
    perms = resolvePerms(perms);
    commit('SET_PERMS', perms);
    //把menu list 合成成tree
    let tree = makeTree(menus, {id: 'menuId', pId: 'pId'});
    commit('SET_MENUS', tree);

    console.log(perms);
    console.log(tree.toString());
  }
};

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

vue/src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

const getters = {
  sidebar: state => state.app.sidebar,
  language: state => state.app.language,
  size: state => state.app.size,
  device: state => state.app.device,
  visitedViews: state => state.tagsView.visitedViews,
  cachedViews: state => state.tagsView.cachedViews,
  user: state => state.user.user,
  menus: state => state.permission.menus,
  perms: state => state.permission.perms,
  errorLogs: state => state.errorLog.logs,
  dicts: state => state.dicts,
  reLogin: state => state.status.reLogin,
};

Vue.use(Vuex);

// https://webpack.js.org/guides/dependency-management/#requirecontext
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

目录CONTENT

VUEX

评论区