Vue:无法访问beforeEnter vue-路由器中的Pinia商店
Vue:无法访问beforeEnter vue-路由器中的Pinia商店
提问于 2022-01-14 13:00:50
我使用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");
});Stack Overflow用户
发布于 2022-02-05 07:38:18
您可以在definestore的第二个参数中传递该方法：
store.js
export const useAppStore = defineStore('app', () => {
const state = reactive({
appName: 'App',
appLogo: ''
})
return {
...toRefs(state)
}
})router.js
router.beforeEach((to, from, next) => {
const apppStore = useAppStore()
next()
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70710965
复制相关文章
相似问题
腾讯云开发者
