当我用Vuex的方式来使用Pinia时,我发现不是那么好用, 在非vue文件中没办法清除掉Pinia中已经保存的数据.
比如:
我把token通过pinia store保存了, 在.vue文件里是可以获取和修改的, 但是在axios.js请求响应触发token过期动作时, 是没办法清除掉pinia中保存的数据的
解决办法:
通过把创建的store挂载在window对象上, 这样就可以通过window对象来找到store, 从而操作和获取store的数据
代码如下:
// 这个文件是pinia store, 存储token数据的
import { defineStore } from "pinia";
import utils from '../common/utils'
const token= utils.getStorageSync('token')
export const useUserStore = defineStore({
id: "user",
state: () => ({
token:token||''
}),
actions: {
saveToken(data) {
this.token= data
utils.setStorageSync('token', data)
}
},
});
window.piniaStore = {
...window.piniaStore,
useUserStore
}
// axios.js
import axios from 'axios';
import utils from '../common/utils';
console.log('axios')
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_URL,
timeout: 60000,
timeoutErrorMessage: '请求超时,请稍后再试',
headers: {
'x-token': ''
}
})
// 添加请求拦截器
...
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
if (登录失效) {
utils.clearAll();
}
return response.data
})
export default instance
// utils.js
// 清除所有账号信息
utils.clearAll = function () {
try {
// 需要清空的值
const keys = ['token','userinfo',...]
keys.forEach(k => {
window.localStorage.removeItem(k)
})
// 清空pinia store
const { useUserStore } = window.piniaStore
const userStore = useUserStore()
userStore.saveToken('')
} catch (error) {
throw error
}
}