欢迎访问 如意编程网!

如意编程网

当前位置: 首页 > 编程资源 > 综合教程 >内容正文

综合教程

实战进阶 Vue3+Axios+pinia

发布时间:2023/10/11 综合教程 16 老码农
如意编程网 收集整理的这篇文章主要介绍了 实战进阶 Vue3+Axios+pinia 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

实战进阶 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的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错,欢迎将如意编程网推荐给好友。