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的值了
});
相关推荐
济61715 分钟前
linux 系统移植(第六期)--Uboot移植(5)--bootcmd 和 bootargs 环境变量-- Ubuntu20.04
java·前端·javascript
西西学代码19 分钟前
aa---(12)
笔记
航Hang*21 分钟前
第3章:复习篇——第1节:创建和管理数据库---题库
数据库·笔记·sql·学习·期末·复习
lili-felicity29 分钟前
React Native for OpenHarmony 实战:Easing 动画完全指南
javascript·react native·react.js
m0_7482546639 分钟前
AJAX 基础实例
前端·ajax·okhttp
vmiao40 分钟前
【前端入门】商品页放大镜效果(仅放大镜随鼠标移动效果)
前端
持续前行44 分钟前
vscode 中找settings.json 配置
前端·javascript·vue.js
Anita_Sun1 小时前
Lodash 源码解读与原理分析 - Lodash IIFE 与兼容性处理详解
前端
用户904706683571 小时前
Nuxt 请求后端接口怎么写,一篇文章讲清楚
前端
ahubbub1 小时前
用 maptalks 在 Web 上做可扩展的 2D/3D 地图渲染与交互
前端