侧边栏壁纸
  • 累计撰写 781 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

VUEX

Dettan
2021-04-10 / 0 评论 / 0 点赞 / 114 阅读 / 2,808 字
温馨提示:
本文最后更新于 2022-04-30,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
/ 前端 / 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) => ,
SET_PERMS: (state, perms) =>
};

const actions = {
generateRoutes(
, 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(
, 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

0

评论区