store文件夹的处理,vuex模块化modules

index文件代码:
import Vue from "vue";
import Vuex from "vuex";
// 导入根getters
import getters from "./getters";
// 导入三个模块
import app from "./modules/app"; // 设置的更换
import settings from "./modules/settings"; // 配置的切换
import user from "./modules/user"; // 用户模块 Vue.use(Vuex);
// 实例化仓库
const store = new Vuex.Store({
// 没有根state,mutation,action,全部都是采用模块化开发vuex
// 注册模块
modules: {
app,
settings,
user,
},
// 根getters
// getters: getters,
getters,
}); export default store;
getters.js代码:
// 通过根getters建立对子模块state里面的数据的快捷访问
const getters = {
sidebar: (state) => state.app.sidebar,
device: (state) => state.app.device,
token: (state) => state.user.token,
username: (state) => state.user.userInfo.username,
userId: (state) => state.user.userInfo.userId,
staffPhoto: (state) => state.user.userInfo.staffPhoto,
companyId: (state) => state.user.userInfo.companyId,
};
export default getters;
modules / user文件代码:
import { getToken, setToken, removeToken } from "@/utils/auth";
import { loginApi, getInfoApi, getUserInfoApi } from "@/api/user";
const state = {
token: getToken(), // 读取cookie里面作为默认值
userInfo: {}, //用户资料
};
const mutations = {
// 设置token
setToken(state, data) {
state.token = data; // 存vuex
setToken(data); // 存本地
},
// 移除token
removeToken(state) {
state.token = null;
removeToken();
},
// 设置用户资料
setUserInfo(state, data) {
state.userInfo = data;
},
// 删除用户资料
removeUserInfo(state) {
state.userInfo = {};
},
};
const actions = {
// 登录操作
async loginAction(context, data) {
// 接收表单数据 data
// 发生请求 loginApi,得到token
let token = await loginApi(data);
// 触发mutation,存储token
context.commit("setToken", token);
},
// 获取用户资料的action
async getUserProfileAction(context) {
let res = await getInfoApi();
let res2 = await getUserInfoApi(res.userId);
context.commit("setUserInfo", { ...res, ...res2 });
},
// 退出操作
quitAction(context) {
context.commit("removeToken");
context.commit("removeUserInfo");
},
};
export default {
namespaced: true,
state,
mutations,
actions,
};
store文件夹的处理,vuex模块化modules的更多相关文章
- Vuex模块化
上图是vuex的结构图vuex即 store, 包含State,Action,Mutations, 每一个vue项目都需要使用vuex做组件之间的数据共享 使用场景: 数据最终存放在store的Sta ...
- 【Vue项目】商品汇前台(二)进度条插件+Vuex模块化仓库+函数的防抖与节流+路由传参
前言 1 nprogress进度条的使用 当请求发出进度条出现并向前走,请求成功后进度条消失.nprogress是一种进度条插件 1.1 nprogress进度条插件安装 npm i --save n ...
- Vuex扫描自定义文件夹下的所有文件
解决问题:当我们规范 model 统一放在某个文件夹下,且可以通过子文件夹分类.当新加model时又不想去修改别的地方. 代码 // /src/sotre/index.js 1 import { cr ...
- 074——VUE中vuex之模块化modules开发实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 重新想象 Windows 8 Store Apps (25) - 选取器: 文件选取窗口, 文件夹选取窗口, 文件保存窗口
原文:重新想象 Windows 8 Store Apps (25) - 选取器: 文件选取窗口, 文件夹选取窗口, 文件保存窗口 [源码下载] 重新想象 Windows 8 Store Apps (2 ...
- 重新想象 Windows 8 Store Apps (22) - 文件系统: 访问文件夹和文件, 通过 AQS 搜索本地文件
原文:重新想象 Windows 8 Store Apps (22) - 文件系统: 访问文件夹和文件, 通过 AQS 搜索本地文件 [源码下载] 重新想象 Windows 8 Store Apps ( ...
- Windows Store App JavaScript 开发:获取文件和文件夹列表
在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作.如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过Windows.Storage命名空间中的KnownFolder ...
- Windows Store App JavaScript 开发:选取文件和文件夹
前面提到过,文件打开选取器由FileOpenPicker类表示,用于选取或打开文件,而文件夹选取器由FolderPicker类表示,用来选取文件夹.在FileOpenPicker类中,pickSing ...
- Windows Store App 获取文件及文件夹列表
通过使用13.2.1小节给出的方法和属性,不仅可以对用户库中的文件和文件夹进行操作,还可以获取其中所有的文件或者文件夹,比如为了完整地展现整个音乐库,可以获取并列举出音乐库中所有的音乐文件,以便能够在 ...
- Windows Store App 用户库文件夹操作
上面介绍了与用户库文件有关的操作,包括创建.读写等,下面将介绍与用户库文件夹相关的操作. 与文件操作一样,想要对用户库文件夹进行操作,需要首先获取用户库的相应位置,获取的方法上面已经介绍过了,这里不再 ...
随机推荐
- 华为高性能计算(HPC)文档——技术支持>智能计算解决方案>高性能计算>HPC
链接地址: https://support.huawei.com/enterprise/zh/server-solutions/hpc-pid-253585671 ================== ...
- php 开发日常收获
最近项目需求: 仿制某网站的菜单功能 效果如下: 效果大概就是这样啦.分析下吧:主要是分级查询我的思路:首先从数据库中查询所有的顶级目录: 目前就是这几个顶级目录在数据库中特点就是 父级id是0(一般 ...
- [POI2008] POC-Trains 题解
前言 题目链接:洛谷. 时间复杂度和输入同阶的做法. 题意简述 有 \(n\)(\(n \leq 10^3\))个长 \(m\) 的字符串,\(q\)(\(q \leq 10^5\))次操作,交换两个 ...
- Apache DolphinScheduler 1.3.4升级至3.1.2版本过程中的踩坑记录
因为在工作中需要推动Apache DolphinScheduler的升级,经过预研,从1.3.4到3.1.2有的体验了很大的提升,在性能和功能性有了很多的改善,推荐升级. 查看官方的升级文档,可知有提 ...
- Camera | 2.MIPI、CSI基础
瑞芯微专栏 上一篇我们讲解了camera的一些基础概念和知识. 我们说了,现在的手机由于高分辨率的要求,现在基本上都是基于MIPI.CSI协议来实现的, 本篇讲解MIPI.CSI的一些基础知识. 摄像 ...
- PCSR:已开源,三星提出像素级路由的超分辨率方法 | ECCV 2024
基于像素级分类器的单图像超分辨率方法(PCSR)是一种针对大图像高效超分辨率的新方法,在像素级别分配计算资源,处理不同的恢复难度,并通过更精细的粒度减少冗余计算.它还在推断过程中提供可调节性,平衡性能 ...
- 【图文教程】Centos单机安装Redis
1.1.安装Redis依赖 Redis是基于C语言编写的,因此首先需要安装Redis所需要的gcc依赖: yum install -y gcc tcl 1.2.上传安装包并解压 例如,凯哥将其放到 ...
- python pyqt6 设定窗口置顶
self.setWindowFlag(Qt.WindowType.WindowStaysOnTopHint)即可效果一般,页面会出现闪烁一次, # 置顶按钮 self.top_button = QPu ...
- 【题目全解】ACGO排位赛#12
ACGO 排位赛#12 - 题目解析 别问为什么没有挑战赛#11,因为挑战赛#11被贪心的 Yuilice 吃掉了(不是). 本次挑战赛难度相比较前面几次有所提升. 爆料:小鱼现在已经入职了研发部门, ...
- UWP 通过 .NET 9 和Native AOT 的支持实现 UWP 应用的现代化
微软(9 月 11 日)发布博文,微软正在预览对 .NET 9 的 UWP(通用 Windows 平台)支持,为现有 UWP 开发人员提供一条使用最新的 .NET 和本机 AOT 实现其应用程序现代化 ...