Vue:无法访问beforeEnter vue-路由器中的Pinia商店
我使用Vue 3，包括组合API和额外的Pinia作为国家管理。
在options中有一个方法beforeRouteEnter，它被内置到组件本身中。不幸的是，这种方法并不存在于组合API中。在这里，应该在beforeRouteEnter方法中的代码直接写入安装方法。但是，这意味着首先加载和显示组件，然后执行代码，如果检查失败，则将组件重定向到错误页面，例如。
我的想法是直接在路由的beforeEnter方法中的路由配置中进行检查。但是，我无法访问Pinia，虽然它以前在main.js中被调用过，但是它似乎还没有初始化。
控制台日志
Uncaught Error: []: getActivePinia was called with no active Pinia. Did you forget to install pinia?
const pinia = createPinia()
app.use(pinia)
This will fail in production.Router.js
import { useProcessStore } from "@/store/process";
const routes: Array<RouteRecordRaw> = [
{
path: "/processes/:id",
name: "ProcessView",
component: loadView("ProcessView", "processes/"),
beforeEnter: () => {
const processStore = useProcessStore();
console.log(processStore);
},
children: [
{
path: "steer",
name: "ProcessSteer",
component: loadView("ProcessSteer", "processes/")
},
{
path: "approve/:code",
name: "ProcessApprove",
component: loadView("ProcessApprove", "processes/")
}
]
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});
export default router;main.js
import { createApp } from "vue";
import "@/assets/bundle-bootstrap.css";
import App from "@/App.vue";
import { createPinia } from "pinia";
import router from "@/router";
import SvgIcon from "@/components/SvgIcon.vue";
const pinia = createPinia();
const app = createApp(App);
app.use(pinia);
app.use(router);
app.component("SvgIcon", SvgIcon);
router.isReady().then(() => {
app.mount("#app");
});回答 5
Stack Overflow用户
发布于 2022-01-14 17:36:12
但是，我无法访问Pinia，虽然它以前在main.js中被调用过，但它似乎还没有初始化
在什么之前？Pinia实例是在const pinia = createPinia(); 导入router模块之后用创建的--在导入该模块时，将执行所有副作用，包括对createRouter()的调用。一旦路由器被创建，它就开始了它的初始导航(在客户端服务器上，您需要用router.push()触发它)--如果您碰巧在URL上匹配使用Pinia存储的路由，那么在Pinia创建之前useProcessStore()就会发生.
你有两个选择：
- 要么确保在创建(
useXXXStore())和安装(app.use(pinia))之后 Pinia发生调用 - 或者将Pinia实例传递给组件之外的任何
useXXXStore().
// store.js
import { createPinia } from "pinia";
const pinia = createPinia();
export default pinia;// router.js
import pinia from "@/store.js";
import { useProcessStore } from "@/store/process";
const routes: Array<RouteRecordRaw> = [
{
path: "/processes/:id",
name: "ProcessView",
component: loadView("ProcessView", "processes/"),
beforeEnter: () => {
const processStore = useProcessStore(pinia ); // <-- passing Pinia instance directly
console.log(processStore);
},
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});
export default router;// main.js
import { createApp } from "vue";
import App from "@/App.vue";
import store from "@/store.js";
import router from "@/router";
const app = createApp(App);
app.use(store);
app.use(router);
router.isReady().then(() => {
app.mount("#app");
});Stack Overflow用户
发布于 2022-07-24 13:20:53
希望这会有帮助。Vue为我们需要存储(组件之外)的一些功能提供支持。
为了解决这个问题，我只是在Vue(beforeEach)提供的函数中调用了beforeEach函数，它起了作用。
参考资料：https://pinia.vuejs.org/core-concepts/outside-component-usage.html
例子：
import { useAuthStore } from "@/stores/auth";
.
.
.
.
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
router.beforeEach(async (to, from) => {
const authStore = useAuthStore();
// use authStore Here
});Stack Overflow用户
发布于 2022-08-21 16:58:51
我在管理授权的"beforeEach“方法中访问商店也有同样的问题。
我在main.js中使用这种方法，而不是在router.js中使用。在router.js存储中无法访问。
在piniCreate.js中创建pinia实例
//piniaCreate.js
import { createPinia } from "pinia";
const pinia = createPinia();
export default pinia;然后在mainStore.js中创建我的商店
import { defineStore } from 'pinia'
export const mainStore = defineStore('counter', {
state: () => {
return {
user: {
isAuthenticated: isAuthen,
}
}
},
actions: {
login(result) {
//...
this.user.isAuthenticated = true;
} ,
logOff() {
this.user.isAuthenticated = false;
}
}
});然后我在beforeEach中使用了main.js方法
//main.js
import { createApp } from 'vue'
import App from './App.vue'
import pinia from "@/stores/piniaCreate";
import { mainStore } from '@/stores/mainStore';
import router from './router'
const app = createApp(App)
.use(pinia)
.use(router)
const store1 = mainStore();
router.beforeEach((from) => {
if (from.meta.requiresAuth && !store1.user.isAuthenticated) {
router.push({ name: 'login', query: { redirect: from.path } });
}
})
app.mount('#app');https://stackoverflow.com/questions/70710965
复制相似问题
腾讯云开发者
