首页 > 其他分享 >store文件夹的处理,vuex模块化modules

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

时间:2022-11-05 07:55:47浏览次数:70  
标签:data getters modules token state user import vuex store

 

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

 

标签:data,getters,modules,token,state,user,import,vuex,store
From: https://www.cnblogs.com/zhulongxu/p/16859607.html

相关文章

  • 聊聊Vuex原理
    背景Vuex是一个专为Vue.js应用程序开发的状态管理模式。Vuex是专门为Vue.js设计的状态管理库,以利用Vue.js的细粒度数据响应机制来进行高效的状态更新。如果你已......
  • ceph-bluestore-tool基本使用
    主要是在bluestore的实例上执行低级管理操作的使用程序,是cephbluestore的管理工具命令​​help​​显示帮助信息​​fsck[--deep]​​对bluestore元数据进行一致性检查......
  • Module Error (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-load
    使用uni-app报ModuleError(from./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js):检查控制台提示的xx.vue检查看......
  • ios AppStore 上架流程(Xcode11.5)
     AppStore上架流程前提已经注册苹果开发者账号登录开发者官网https://developer.apple.com/点击account进行登录 点击Certific......
  • ios AppStore 上架流程(Xcode11.5)
    AppStore上架流程前提已经注册苹果开发者账号登录开发者官网​​https://developer.apple.com/​​点击account进行登录点击Certificates,Identifiers&Profiles1.首先进......
  • 学习Pinia(安装,引入注册Vue3,初始化仓库Store,State值获取修改,解构store,actions,getters,AP
    全局状态管理工具Pinia.js有如下特点:完整的ts的支持;足够轻量,压缩后的体积只有1kb左右;去除mutations,只有state,getters,actions;actions支持同步和异步;代码扁平化没有......
  • 苹果 App Store 开始支持隐藏上架应用:只能通过链接下载
     据MacRumors报道,苹果公司最近宣布,正如其开发者网站上所概述的那样,AppStore现在支持只能通过直接链接才能发现的隐藏应用。    图片来自Apple拥有不适合公......
  • vuex中能直接修改state吗?
    当我们使用vuex的时候,时不时能看到“更改Vuex中的store中的状态唯一办法就是提交mutations”,但是有没有试想过,我们不提交mutations其实也能修改state的值?答案是可以的我们......
  • vue导入项目缺少依赖‘node_modules’
    从git下载好的项目,导入vue时提示‘node_modules’依赖则需要在你的项目包下面找是否有package-lock.json文件,如:如果有,但是依旧报错,直接删除package-lock.json文件,用终......
  • CF1208D Restore Permutation
    题目传送门思路别的题解讲的比较奇妙,来一篇易懂的题解。首先我们发现最后一个位置的值是可以首先确定的,因为它前面的数已经填完了。设最后一个位置的数为\(x\),则它的......