Pinia version number

"pinia": "^2.0.34"

Error graph

Error reason

Accessing the pinia instance before registering Pinia results in an error. It's like driving a car before it starts, you can't drive away at all!

pinia example

pinia has been registered in main.js, which is the same as the official website (code will no longer be posted)

Define pinia instance ↓

src/store/userInfo.js

import {
    
     defineStore } from 'pinia'

const useUserInfoStore = defineStore('userInfo', {
    
    
    state: () => {
    
    
        return {
    
    
            userName: null,
            logined: false,//是否登录
            uid: null,
            jianjie: null,
            auth: null,//登录的token授权
            showLoginForm: false,//显示登录/注册表单
            musicPlayMode: 0,//音乐播放模式 0 列表播放 | 1 单曲循环 | 2 随机
        }
    },
    persist: {
    
    
        key: 'userInfo',
        paths: ['userName', 'auth', 'uid', 'logined', 'showLoginForm', 'musicPlayMode'],

    },

    actions: {
    
    
        setShowLoginForm() {
    
    
            this.showLoginForm = !this.showLoginForm
        }
    }
})


export default useUserInfoStore

Solve the problem

There are 2 situations

In the first case, use the pinia instance in the vue file

The following example can be used normally without any problem

views/Home.vue

<template>

</template>

<script setup>
// 导入pinia实例
import useUserInfoStore from '@/stores/userInfo'
//使用pinia实例
const userInfoStore = useUserInfoStore()
console.log(userInfoStore)
</script>

In the second case, use the pinia instance in the js/ts file

For example, I src/common/test.jsuse Pinia in to make an example of clicking the login button, and the login is successful and the token is saved locally
If the login is successful, and the backend has returned token

wrong usage

An error will be reported, because when loading the js file, it is possible to use Pinia without even registering pinia
Focus on the 4th line of code

src/common/test.js

// 导入pinia实例
import useUserInfoStore from '@/stores/userInfo'
//使用pinia实例
const userInfoStore = useUserInfoStore()
console.log(userInfoStore)

//登录按钮的click事件
const loogin = ev =>{
    
    
	// 假如这里有很多js代码 ..................
	
	const token = '后端返回的toen'
	// 登录成功，开始接收后端返回的toekn
	userInfoStore.auth.value=  token 
}

correct usage

src/common/test.js

// 导入pinia实例
import useUserInfoStore from '@/stores/userInfo'

//登录按钮的click事件
const loogin = ev =>{
    
    
	// 假如这里有很多js代码 ..................
	
	//这里才开始使用pinia实例，因为在这里pinia已经完全初始化
	const userInfoStore = useUserInfoStore()
	console.log(userInfoStore) 
	
	const token = '后端返回的toen'
	// 登录成功，开始接收后端返回的toekn
	 userInfoStore.auth.value=  token 
}

Summary of Correct Usage vs Incorrect Usage

Pinia can be used directly in the vue file
In the js/ts file, pinia is only used when processing business, for example, the pinia instance is used in the click event of a button.
- When using pinia directly at the top of the js/ts file, when loading the js/ts, using pinia before the registration of pinia is completed will definitely report an error
- Therefore, when using the pinia instance in the js/ts file, it must be used when processing business, such as in the click event of the button

tail

In fact, the official website says very clearly
the official website link - https://pinia.web3doc.top/core-concepts/outside-component-usage.html#%E5%8D%95%E9%A1%B5%E5%BA%94% E7%94%A8%E7%A8%8B%E5%BA%8F, as shown in the figure

Avoiding the Pit ( Invasion and Deletion )

was called but there was no active Pinia. Did you forget to install piniaThe solution to the pinia error report on the Internet is really deceptive, such as the pinia pit
避坑１：https://blog.csdn.net/qq_37291367/article/details/129195604?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-129195604-blog-130828829.235%5Ev38%5Epc_relevant_sort_base3&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-129195604-blog-130828829.235%5Ev38%5Epc_relevant_sort_base3&utm_relevant_index=1
避坑２：https://blog.csdn.net/weixin_46054431/article/details/124769206
避坑３：https://blog.csdn.net/zlting_/article/details/127495583

I think the above solution is extremely wrong

【Pinia】 was called but there was no active Pinia. Did you forget to install pinia | pinia报错