标签：axios return database 手把手 项目 js user Vue3 vuex
学完vue3之后一直感觉手痒痒想用vue3做项目，正好最近公司不是很忙，就以公司现开发项目为模板将公司项目升级3.0。
项目搭建
01. 搭建项目
vue create qitaijk3.0
选择自定义第三个
选择125678(空格选中)回车确定
选择3
选择n
选择less
选择第三个 Standard config
两个都选中
选择第一个
选择n
到这里搭建就已经完成了
以上用户可根据自己喜好进行配置。新手建议跟随作者进行配置
完成之后可以先尝试运行项目
也可以使用npm run serve 我这边使用的是yarn
Vuex配置
完成了上面配置 接下里我们就进入到vuex的配置中
首先因为vuex的数据我们需要做持久化，所以首先下载vuex持久化插件
npm i vuex-persistedstate
或
yarn add vuex-persistedstate老规矩，还是分模块
在src/store 文件夹下新建 modules 文件，在 modules 下新建 user.js 和 database.js
user.js
// 用户模块
export default {
namespaced: true,
state () {
return {
setUser: {
}
}
},
mutations: {
setUser (state, setUser) {
state.setUser = setUser
}
}
}
database.js
// 分类模块
export default {
namespaced: true,
state () {
return {
database: []
}
}
}
store/index.js
然后接下来在store的首页引入持久化插件进行使用
import { createStore } from 'vuex'
// 引入持久化插件
import createPersistedstate from 'vuex-persistedstate'
import user from './modules/user'
import database from './modules/database'
export default createStore({
modules: {
user,
database
},
plugins: [
createPersistedstate({
key: 'haihaina', // 存储的名字
paths: ['user', 'database'] // 持久化的模块
})
]
})
axios
接下来就到了封装axios
首先第一步还是需要下载axios
npm i axios 或 yarn add axios
新建 src/utils/request.js 模块
// 1. 创建一个新的axios实例
// 2. 响应拦截器：2.1. 剥离无效数据 2.2. 处理token失效
// 3. 导出一个函数，调用当前的axsio实例发请求，返回值promise
// 1. 创建一个新的axios实例
import axios from 'axios'
// 导出基准地址
export const baseURL = '公司项目的地址'
const instance = axios.create({
// axios 的一些配置，baseURL timeout
baseURL,
timeout: 5000
})
instance.interceptors.request.use(config => {
return config
}, err => {
return Promise.reject(err)
})
// 2. 响应拦截器：2.1. 剥离无效数据 2.2. 处理token失效
instance.interceptors.response.use(
// res => res.data 取出data数据，将来调用接口的时候直接拿到的就是后台的数据
res => res.data,
err => {
return Promise.reject(err)
})
// 3. 导出一个函数，调用当前的axsio实例发请求，返回值promise
// 请求工具函数
export default (url, method, submitData) => {
// 负责发请求：请求地址，请求方式，提交的数据
return instance({
url,
method,
// 1. 如果是get请求 需要使用params来传递submitData ?a=10&c=10
// 2. 如果不是get请求 需要使用data来传递submitData 请求体传参
[method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
})
}
到这里我们Vue3的项目就已经基本上完成啦，下面就可以按照自己公司项目需求进行项目的路由的设计，如果这篇文章对您有所帮助，欢迎点赞收藏。
有什么问题点击下方链接提问
http://print.haihaina.cn/qr.jpg
标签：axios,return,database,手把手,项目,js,user,Vue3,vuex 来源： https://blog.csdn.net/m0_56344602/article/details/122363146
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。