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的值了
});
相关推荐
じ☆冷颜〃1 天前
分布式系统中网络技术的演进与异构融合架构(HFNA)
笔记·python·物联网·设计模式·架构·云计算
郭涤生1 天前
第十章_信号_《UNIX环境高级编程(第三版)》_笔记
服务器·笔记·unix
前端小L1 天前
双指针专题(三):去重的艺术——「三数之和」
javascript·算法·双指针与滑动窗口
0和1的舞者1 天前
Spring AOP详解(一)
java·开发语言·前端·spring·aop·面向切面
web小白成长日记1 天前
在Vue样式中使用JavaScript 变量(CSS 变量注入)
前端·javascript·css·vue.js
QT 小鲜肉1 天前
【Linux命令大全】001.文件管理之which命令(实操篇)
linux·运维·服务器·前端·chrome·笔记
C_心欲无痕1 天前
react - useImperativeHandle让子组件“暴露方法”给父组件调用
前端·javascript·react.js
巧克力味的桃子1 天前
单链表 - 有序插入并输出学习笔记
笔记·学习
智者知已应修善业1 天前
【求等差数列个数/无序获取最大最小次大次小】2024-3-8
c语言·c++·经验分享·笔记·算法
霖鸣1 天前
Minecraft通过kubejs进行简单魔改
javascript