平安银行官方网站,网站建设开发报价,重庆seo网站推广费用,成都app开发制作公司排名文章目录 一、概述二、使用步骤安装pinia在vue应用实例中使用pinia在src/stores/token.js中定义store在组件中使用store登录成功后#xff0c;将token保存pinia中向后端API发起请求时#xff0c;携带从pinia中获取的token 三、参考资料 一、概述
Pinia是Vue的专属状态管理库… 文章目录 一、概述二、使用步骤安装pinia在vue应用实例中使用pinia在src/stores/token.js中定义store在组件中使用store登录成功后将token保存pinia中向后端API发起请求时携带从pinia中获取的token 三、参考资料 一、概述
Pinia是Vue的专属状态管理库它允许你跨组件或页面共享状态
二、使用步骤
安装pinia
npm install pinia在vue应用实例中使用pinia
import { createPinia } from pinia
const pinia createPinia()
app.use(pinia)在src/stores/token.js中定义store
import { defineStore } from pinia;
import {ref} from vue;/*defineStore参数描述第一个参数给状态起名具有唯一性第二个参数函数可以把定义该状态中拥有的内容defineStore返回值描述返回的是一个函数将来可以调用该函数得到第二个参数中返回的内容
*/
export const useTokenStore defineStore(token,(){//1.定义描述tokenconst token ref()//2.定义修改token的方法const setToken (newToken){token.value newToken}//3.定义移除token的方法const removeToken (){token.value}return {token,setToken,removeToken}
}
)在组件中使用store
登录成功后将token保存pinia中
Login.vue
//导入token状态
import { useTokenStore } from /stores/token.js
//调用useTokenStore得到状态
const tokenStore useTokenStore();//保存tokentokenStore.setToken(result.data)向后端API发起请求时携带从pinia中获取的token
在article.js中导入/stores/token.js, 在发起查询文章分类列表的时候把token通过请求头的形式携带给服务器
//导入/stores/token.js
import { useTokenStore } from /stores/token//文章分类列表查询
export const articleCategoryListService () {//获取token状态const tokenStore useTokenStore()//通过请求头Authorization携带tokenreturn request.get(/category, { headers: { Authorization: tokenStore.token } })
}三、参考资料
https://www.bilibili.com/video/BV14z4y1N7pg?spm_id_from333.788.player.switchvd_source0467ab39cc5ec5940fee22a0e7797575p80
