在我的vue 3项目中,我从pinia获取token,然后将其添加到请求头中
utils/request.js
import axios from 'axios'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router'
const baseURL = 'xxxx'
const userStore = useUserStore()
const instance = axios.create({
baseURL: baseURL,
timeout: 1000
})
instance.interceptors.request.use(
function (config) {
// take token from pinia and add it in request header.
if (userStore.token) {
config.headers.Authorization = userStore.token
}
return config
},
function (error) {
return Promise.reject(error)
}
)
//........
export default instance
export { baseURL }
字符串
它工作得很好,但现在我有一个方法,用来从服务获得使用信息。
import request from '@/utils/request.js'
//......
export const userGetInfoService = () => request.get('/my/userinfo')
型
在我的商店中,我想调用这个方法来获取用户信息并将其保存在pinia中:
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { userGetInfoService } from '../../api/user'
export const useUserStore = defineStore(
'big-user',
() => {
//.......
const userInfo = ref({})
const getUserInfo = async () => {
const result = await userGetInfoService()
userInfo.value = result.data.data
}
return {
//......
userInfo,
getUserInfo
}
},
{
persist: true
}
)
型
但是一旦我在store中调用这个方法,
x1c 0d1x的数据
的
我不知道为什么我不能在商店调用这个方法
1条答案
按热度按时间7d7tgy0s1#
here文档中解释了在组件外部使用pinia。
您的
router.js
代码在main.js中的app.use(pinia)
之前运行,因此在您调用useUserStore()
时Pinia没有初始化,这就是您收到错误的原因。您可以使用一些console.log确认这一时间。因为你的axios拦截器函数应该在pinia处于活动状态并且你的应用正在运行之后才被调用,解决方案是在拦截器中定义你的商店:
字符串