Pinia 踩坑记录

1、子store中如何使用router

以user.ts 这个store为例

错误写法

js 复制代码
// 说明:不能使用插件实例化router,否则获取不到router的函数
//	错误写法如下:
	import { useRouter } from "vue-router"
	actions:{
		login(){
			const router = useRouter()
			// 不信你在这里打印router,最终得到的值是undefined  
			console.log(router) // undefined
			router.push('/') // router都取不到更别说跳转了
		}
	}

正确写法

js 复制代码
import router from "@/router"; // 引入自己封装的路由  

actions:{
		login(){
			console.log(router) // 可以获取到router的实例对象
			router.push('/') // 可以跳转
		}
	}

2、router.ts中如何使用store

必须在函数体中实例,否则会报未能找到pinia,让你安装pinia的警告

错误写法

js 复制代码
import { useUserStore } from "@/store";
const useUser = useUserStore();
 
router.beforeEach((to, from, next) => {
  console.log(useUser.loginForm) // 这里是取不到store的
});

正确写法

js 复制代码
import { useUserStore } from "@/store";

router.beforeEach((to, from, next) => {
  const useUser = useUserStore();
  console.log(useUser.loginForm) // 这样就可以取出store的值了
});
相关推荐
那一抹阳光多灿烂17 小时前
CSS 编码规范
前端·css
degree52017 小时前
CSS :has() 选择器详解:为什么它是“父选择器”?如何实现真正的容器查询?
前端·css·css3
૮・ﻌ・17 小时前
CSS高级技巧---精灵图、字体图标、布局技巧
前端·css
昔人'17 小时前
纯`css`固定标题并在滚动时为其添加动画
前端·css
超人不会飛17 小时前
Vue markdown组件 | 流式 | 大模型应用
前端·javascript·github
小白640217 小时前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·css·html
怪可爱的地球人17 小时前
vue3小白入门
前端
掘金安东尼17 小时前
bun install:安装过程的幕后揭秘
前端·github·bun
Dontla17 小时前
流行的前端架构与后端架构介绍(Architecture)
前端·架构
智者知已应修善业18 小时前
【51单片机单按键控制2个LED循环闪烁】2022-12-7
c语言·经验分享·笔记·嵌入式硬件·51单片机