The following is a rewrite of 'vue3 pinia pitfalls and solution example code analysis': 'Analysis of vue3 pinia, including pitfalls and solutions, combined with example code for analysis.'

Installation

yarn add pinia # or npm install pinia

Usage

// user.ts
import { defineStore } from 'pinia'
export const useUserStore = defineStore({
  id: 'user',
  state: () => ({
    ...
  }),
  actions: {
    ...
  }
})
// components.vue
import { useUserStore } from '@/store/user'
const userStore = useUserStore()

Problems during use

Cannot access 'useUserStore' before initialization

Reproduction steps

Usually we will determine whether the user is logged in in the routing hook to determine the permissions. For example:

// permission.ts
import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
import router from './router'
import { useUserStore } from './store/user'
const userStore: any = useUserStore()
router.beforeEach(async(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
  // TODO 判断是否登录
  if (userStore.name) {
    ...
  }
})
// main.ts
const app = createApp(App)
app.use(createPinia())
import router from './router'
import '@/permission'
app.use(router)
app.mount('#app')

Cause of the problem

When the code is executed from top to bottom, when const userStore: any = useUserStore() is encountered, the user status module will be obtained. , but the application has not been mounted yet, so Pinia's global state has not been initialized. As a result, when initializing the user module status acquisition, the global status is not initialized, thus causing the current problem.

Solution

When the routing hook function obtains the user state module and calls the routing hook, it means that the global state has been fully initialized. However, it will cause the user status module to be obtained every time the routing hook is called, which will cause a waste of resources (of course it can achieve the expected purpose, but it is not what we need). We can declare a variable in the outer layer to store the state and make a judgment in the routing hook. If the current variable is empty, it means that the state has not been obtained yet, and the state is obtained under the current situation (similar to a singleton). Final code:

// permission.ts
import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
import router from './router'
import { useUserStore } from './store/user'
let userStore: any = null
router.beforeEach(async(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
  if (userStore === null) {
    userStore = useUserStore()
  } 
  // TODO 判断是否登录
  if (userStore.name) {
    ...
  }
})

The above is the detailed content of The following is a rewrite of 'vue3 pinia pitfalls and solution example code analysis': 'Analysis of vue3 pinia, including pitfalls and solutions, combined with example code for analysis.'. For more information, please follow other related articles on the PHP Chinese website!