实战进阶 Vue3+Axios+pinia

创建文件utils/request.js

import Axios from 'axios';
export const request = Axios.create({
  baseURL: '/api'
});
// 拦截器
request.interceptors.request.use((config) => {
  // 如果 本地存储有token 使用token到 请求头
  const token = sessionStorage.getItem('token');
  if (token) {
    config.token = token;
  }
  return config;
});
request.interceptors.response.use((response) => {
  // 如果 response.data.token 保存token
  if (response.data.token) {
    sessionStorage.setItem('token', response.data.token)
  }
  return response;
})

代理配置(vue.config.js)

module.exports = {
  configureWebpack: { // @vue/cli内部会将这个对象与内置的配置对象merge
    devServer: {
      open: true,
      proxy: {
        '/api': {
          target: 'http://localhost:3000',
          changeOrigin: true,
          // 由于server接口 不以/api开头
          pathRewrite: {
            '^/api': ''
          }
        }
      }
    }
  }
}

Pinia

相较于Vuex更简化的状态管理

Vuex

Pinia

Pinia代码

安装

npm install pinia

引入根目录 main.js 中

import { createPinia } from 'pinia';
createApp(App).use(createPinia())

  

创建vuex定义文件 store/user.js

import { defineStore } from 'pinia';
export const useUser = defineStore({
  id:'user', // 仓库唯一标识
  state() { // 数据
  return {
  menus: [],
  isLogin: false,
  userinfo: {}
  }
},
actions:{ // 变更数据的行为
  setMenus(menu) { // 直接操作state
    this.menus = menu;
  },
  setUserinfo(userInfoObj) { // 通过patch操作
    this.$patch(userInfoObj); //userInfoObj => {userinfo:user}
  }
}

使用仓库

1 import { useUser } from '@/store/user';  //引入vuex 文件
2 const user = useUser();
3 user.menus || user.setMenus // 访问数据 或 action

  

实战进阶 Vue3+Axios+pinia的更多相关文章

  1. DDD实战进阶第一波(二):开发一般业务的大健康行业直销系统(搭建支持DDD的轻量级框架一)

    要实现软件设计.软件开发在一个统一的思想.统一的节奏下进行,就应该有一个轻量级的框架对开发过程与代码编写做一定的约束. 虽然DDD是一个软件开发的方法,而不是具体的技术或框架,但拥有一个轻量级的框架仍 ...

  2. DDD实战进阶第一波(五):开发一般业务的大健康行业直销系统(实现产品上下文领域层)

    从这篇文章开始,我们根据前面的DDD理论与DDD框架的约束,正式进入直销系统案例的开发. 本篇文章主要讲产品上下文中的领域层的主要实现,先简单讲下业务方面的需求:产品SPU与产品SKU,产品SPU主要 ...

  3. DDD实战进阶第一波(六):开发一般业务的大健康行业直销系统(实现产品上下文仓储与应用服务层)

    前一篇文章我们完成了产品上下文的领域层,我们已经有了关于产品方面的简单领域逻辑,我们接着来实现产品上下文关于仓储持久化与应用层的用例如何来协调 领域逻辑与仓储持久化. 首先大家需要明确的是,产品上下文 ...

  4. DDD实战进阶第一波(八):开发一般业务的大健康行业直销系统(业务逻辑条件判断最佳实践)

    这篇文章其实是大健康行业直销系统的番外篇,主要给大家讲讲如何在领域逻辑中,有效的处理业务逻辑条件判断的最佳实践问题. 大家都知道,聚合根.实体和值对象这些领域对象都自身处理自己的业务逻辑.在业务处理过 ...

  5. DDD实战进阶第一波(九):开发一般业务的大健康行业直销系统(实现经销商上下文仓储与领域逻辑)

    上篇文章主要讲述了经销商上下文的需求与POCO对象,这篇文章主要讲述该界限上下文的仓储与领域逻辑的实现. 关于界限上下文与EF Core数据访问上下文参考产品上下文相应的实现,这里不再累述. 因为在经 ...

  6. DDD实战进阶第一波(十):开发一般业务的大健康行业直销系统(实现经销商登录仓储与逻辑)

    上一篇文章主要讲了经销商注册的仓储和领域逻辑的实现,我们先把应用服务协调完成经销商注册这部分暂停一下,后面文章统一讲. 这篇文章主要讲讲经销商登录的仓储和相关逻辑的实现. 在现代应用程序前后端分离的实 ...

  7. DDD实战进阶第一波(十一):开发一般业务的大健康行业直销系统(实现经销商代注册用例与登录令牌分发)

    前两篇文章主要实现了经销商代注册的仓储与领域逻辑.经销商登录的仓储与相关逻辑,这篇文章主要讲述经销商代注册的用例与经销商登录的查询功能. 一.经销商代注册用例 在经销商代注册用例中,我们需要传递经销商 ...

  8. DDD实战进阶第一波(一):开发一般业务的大健康行业直销系统(概述)

    本系列文章 DDD实战进阶第一波(一):开发一般业务的大健康行业直销系统(概述) DDD实战进阶第一波(二):开发一般业务的大健康行业直销系统(搭建支持DDD的轻量级框架一) 近年来,关于如何开发基于 ...

  9. DDD实战进阶第一波(十五):开发一般业务的大健康行业直销系统(总结篇)

    前面我们花了14篇的文章来给大家介绍经典DDD的概念.架构和实践.这篇文章我们来做一个完整的总结,另外生成一个Api接口文档. 一.DDD解决传统的开发的几大问题: 没有描述需求的设计模型:而是直接通 ...

随机推荐

  1. Java对象已死吗 深入理解Java虚拟机笔记

    1.引用计数器法 给每个对象设置一个计数器,每当有一个引用就给计数器的值+1,引用时小时就减一,当计数器值为0是就可以回收掉了. 主流虚拟机都没有使用这种算法,循环依赖问题 2.可达性分析: 思路是通 ...

  2. 定制化JDK升级引发的离奇事件

    1.背景 由于Oracle对外宣称Oracle JDK停止免费用于商用.公司法务部门评估之后担心后续会惹上光司,于是就开始了JDK升级-将所有服务Oracle修改为OpenJDK.上周开始微服务JDK ...

  3. 简单创建一个SpringCloud2021.0.3项目(一)

    目录 1. 项目说明 1. 版本 2. 用到组件 3. 功能 2. 新建父模块和注册中心 1. 新建父模块 2. 新建注册中心Eureka 3. 新建配置中心Config 4. 新建两个业务服务 1. ...

  4. docker存储管理及实例

    一.Docker存储概念 1.容器本地存储与Docke存储驱动 容器本地存储:每个容器都被自动分配了内部存储,即容器本地存储.采用的是联合文件系统.通过存储驱动进行管理. 存储驱动:控制镜像和容器在 ...

  5. 在Apache Cassandra数据库软件中报告高严重性RCE安全漏洞

    研究人员披露了ApacheCassandra一个现已修补的高严重性安全漏洞的细节,如果这个漏洞得不到解决,可能会被滥用来获取受影响安装的远程代码执行(RCE). DevOps公司JFrog的安全研究员 ...

  6. immutable 与 stable 函数的差异

    Stable 函数不能修改数据库,单个Query中所有行给定同样的参数确保返回相同的结果.这种稳定级别允许优化器将多次函数调用转换为一次.在索引扫描的条件中使用这种函数是可行的,因为索引扫描只计算一次 ...

  7. mysql_varchar与中英文关系总结

    mysql 4.0版本以下,varchar(50), 指的是50字节,如果存放utf8汉字时,只能存放16个(每个汉字3字节) mysql 5.0版本以上,varchar(50), 指的是50字符,无 ...

  8. Redis变慢?深入浅出Redis性能诊断系列文章(一)

    (本文首发于"数据库架构师"公号,订阅"数据库架构师"公号,一起学习数据库技术)   Redis 作为一款业内使用率最高的内存数据库,其拥有非常高的性能,单节点 ...

  9. Java String Pool--String s = new String("a") 到底创建了几个对象?

    本篇重点(tips): 1. String Pool 是以Java 中 String 对象是不可变的这一特性为基础的 2. String Pool是Heap(堆)中的一块特殊空间(JDK 1.7 之前 ...

  10. haodoop高可用

    高可用简介 Hadoop 高可用 (High Availability) 分为 HDFS 高可用和 YARN 高可用,两者的实现基本类似, 但 HDFS NameNode 对数据存储及其一致性的要求比 ...