我正在使用pinia和vue路由器4.x,但我在商店里使用它们时遇到了问题。每个都独立工作,但不能一起工作。
如果我使用
import router from '../router'
路由器可以工作,但pinia出现故障,错误为
Uncaught ReferenceError: Cannot access 'useAuthStore' before initialization
at axiosroot.ts
@line let authStore = useAuthStore(pinia);
//这里是axiosroot.ts
import axios from "axios";
import {useAuthStore} from '../stores/auth-store'
import { createPinia } from "pinia";
const pinia=createPinia();
let authStore = useAuthStore(pinia);
const url = "http://127.0.0.1:8000/api";
const myToken =authStore.getToken;
export default axios.create({
url,
headers:{"Accept":"application/json"},
});
当我从vue-routern导入路由器时useRouter
未定义
import {useRouter} from 'vue-router'
const router =useRouter();
该误差
Uncaught TypeError: Cannot read properties of undefined (reading 'push')
---
error @ line router.push({name:'Login'})
//下面是剩余的相关代码
import { defineStore, acceptHMRUpdate } from "pinia";
//import router from '../router'
import {useRouter} from 'vue-router'
const router =useRouter();
export const useAuthStore = defineStore({
id: "user",
actions: {
LogOut(payload) {
// this.DELETE_TOKEN(null);
// this.UPDATE_LOGIN_STATUS(false);
router.push({name:'Login'})
},
},
});
6条答案
按热度按时间tkclm6bt1#
在main.js中:
在您的商店中,通过以下方式推送路线:
8wtpewkr2#
对于任何使用类星体v2的人。这对我很有效
在/src/stores/index. js文件中,添加以下内容
然后在src/stores/[yourStore].js文件中使用
我在尝试按照上面的答案添加$路由器时遇到了麻烦
pokxtpni3#
对于使用quasar Framework v2的任何人
找到/src/stores/index. js文件并通过以下方式进行编辑
在Store文件中
gupuwyp24#
如果您在store操作中声明
const router = useRouter();
,而不是在模块顶部声明,那么它应该可以工作。const store = useSomeStore()
声明也是一样,它们不能在模块路径中使用,通常在组件setup
函数和store动作中使用。你不 * 需要 * 创建一个插件,但如果你可能会在你所有的商店使用路由器,它仍然可能值得这样做,如this answer中所述
fdbelqdn5#
路由器必须在pinia中作为插件使用。我在pinia中读到了这个。文档https://pinia.vuejs.org/core-concepts/plugins.html
当添加外部属性、来自其他库的类示例或者仅仅是非React性的东西时,在将对象传递给pinia之前,应该用markRaw() Package 对象。
这会将pinia添加到你创建的每个商店中。main.ts中的配置与vue插件相同。
现在您可以在商店中访问路由器。
kcwpcxri6#
我决定用一个函数来 Package 存储: