不能在一个商店中同时使用vue路由器和pinia

o3imoua4  于 2022-11-25  发布在  Vue.js
关注(0)|答案(6)|浏览(192)

我正在使用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'})
   },
 },
});
tkclm6bt

tkclm6bt1#

main.js中:

import { createApp, markRaw } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

const pinia = createPinia()
pinia.use(({ store }) => {
store.router = markRaw(router)
})
const app = createApp(App)

app.use(pinia)
app.use(router) 
app.mount('#app')

在您的商店中,通过以下方式推送路线:

this.router.push({ name: 'home' });
8wtpewkr

8wtpewkr2#

对于任何使用类星体v2的人。这对我很有效
在/src/stores/index. js文件中,添加以下内容

import { markRaw } from 'vue'
import { route } from 'quasar/wrappers'

pinia.use(({ store }) => {
  // important! dont add a $router here
  store.router = markRaw(route)
})

然后在src/stores/[yourStore].js文件中使用

this.router.push("/") // important! dont add a $router here

我在尝试按照上面的答案添加$路由器时遇到了麻烦

pokxtpni

pokxtpni3#

对于使用quasar Framework v2的任何人
找到/src/stores/index. js文件并通过以下方式进行编辑

import { useRouter } from 'vue-router' ---> import this

// You can add Pinia plugins here
// pinia.use(SomePiniaPlugin)
pinia.router = useRouter() ---> add this line

在Store文件中

this.router.push({ name: 'Home' }) --> use this
gupuwyp2

gupuwyp24#

如果您在store操作中声明const router = useRouter();,而不是在模块顶部声明,那么它应该可以工作。
const store = useSomeStore()声明也是一样,它们不能在模块路径中使用,通常在组件setup函数和store动作中使用。
你不 * 需要 * 创建一个插件,但如果你可能会在你所有的商店使用路由器,它仍然可能值得这样做,如this answer中所述

fdbelqdn

fdbelqdn5#

路由器必须在pinia中作为插件使用。我在pinia中读到了这个。文档https://pinia.vuejs.org/core-concepts/plugins.html
当添加外部属性、来自其他库的类示例或者仅仅是非React性的东西时,在将对象传递给pinia之前,应该用markRaw() Package 对象。

import { markRaw } from 'vue'
// adapt this based on where your router is
import { router } from './router'

pinia.use(({ store }) => {
  store.router = markRaw(router)
})

这会将pinia添加到你创建的每个商店中。main.ts中的配置与vue插件相同。

import { createApp, markRaw } from 'vue';
import { createPinia } from 'pinia';
import App from './app/App.vue';
import { router } from './modules/router/router';

const app = createApp(App);
const pinia = createPinia();

pinia.use(({ store }) => {
  store.$router = markRaw(router)
});
app.use(router)

现在您可以在商店中访问路由器。

export const useMyStore = defineStore("myStore", {
  state: () => {
    return {};
  },
  actions: {
    myAction() {
      this.$router.push({ name: 'Home' }); 
  },
});
kcwpcxri

kcwpcxri6#

我决定用一个函数来 Package 存储:

/*** THIS DOES NOT WORK ****/
const router = useRouter();

export const useLoginStore = defineStore("login", {
  state: () => ({
    loading: false,
    error: "",
  }),
  actions: {
    loginAction(credentials: AuthenticationRequest): Promise<void> {
      await login(credentials);
      router.replace("/")
    },
  },
});


/*** This actually works ***/
export default function useLoginStore() {
  const router = useRouter();

  return defineStore("login", {
    state: () => ({
      loading: false,
      error: "",
    }),
    actions: {
      loginAction(credentials: AuthenticationRequest): Promise<void> {
        await login(credentials);
        router.replace("/")
      },
    },
  })();
}

相关问题