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的值了
});
相关推荐
Hilaku1 小时前
ERP选型时不问MCP,等于默认三年后再付一次集成费!
前端·javascript·程序员
程序人生8881 小时前
几百张固定位置扫描件如何离线批量清?DocConverter Web 批量去水印链路
前端
deli0071 小时前
一个汉字三种编码:UTF-8、GBK、UTF-16 逐字节对比实测
前端
庖丁解牛1 小时前
第二课:把代码保存成网页 + 认识变量 (2)
前端
代码猎人1 小时前
怎么开发一个Vue3项目
前端
梦里寻码1 小时前
从 0 到 1 用 NestJS + LangChain 搭一套可售卖的 SaaS AI 客服:挂件一行代码接入,知识库秒变 SEO 帮助中心
前端·后端·github
爱喝水的小周1 小时前
实验十一 Vuex 实现王者荣耀后台比赛管理系统
前端·css·html
三十而立洋1 小时前
前端模块化的演进:从全局变量到 Import Maps
前端·javascript·前端工程化
橘猫走江湖1 小时前
浮动塌陷复现失败:父元素为什么一直不塌
前端·css
小凯在掘金1 小时前
一文搞懂 Map、Set、WeakMap、WeakSet
javascript·面试