Taste Vue's latest state management tool Pinia (use Pinia to manage login status in actual combat)

what is pinia

pinia is actually Vuex5, which was mentioned by Mr. You Yuxi in the live broadcast, so they are the same thing, but after the fifth version of vuex, it is called pinia. Pinia official document portal
The home page of the official document is a very cute little pineapple

Pinia supports both vue2 and vue3, and vuex4 only supports the Composition API of vue3, so from this point of view, pinia's support is very good

core grammar

The core syntax of pinia includes State, Getters, Actions, Plugins and Stores outside of components (calling outside components). It can be found that compared with vuex4, pinia has one less Mutation. In pinia, actions are directly used to modify the state. In actions, we used to get the state through state. Here, we can get the state directly through this.

start

install pinia

yarn add pinia
或者使用 npm
npm install pinia

You can create a new store folder under src to store pinia-related things
index.ts

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  // could also be defined as
  // state: () => ({ count: 0 })
  actions: {
    increment() {
      this.count++
    },
  },
})

access state

We can access directly through state.

const store = useStore()

store.counter++

Use Getters

It should be noted that in pinia, the same name cannot be used in Getters and state

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
})

Actions

Define and handle business logic

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    },
    randomizeCounter() {
      this.counter = Math.round(100 * Math.random())
    },
  },
})

Pinia combat - login status management

Create a new store file and edit the use of pinia in the index.ts below:

1. isAuthenticated is defined in the state to indicate the login status, and the logged-in user information is stored in the object user, and the initial state is empty
2. Defined in actions, the setAuth method determines the value of isAuth to control the user's login status, and the setUser method writes the user's information into user

import { defineStore } from 'pinia'
import {userType} from '../utils/types'

export const useAuthStore = defineStore('auth', {
  state: () => {
    return { isAuthenticated:false,user: {} }
  },
  getters: {
    getAuthenticated: (state) => state.isAuthenticated,
    getUser: (state) => state.user,
  },
  actions: {
    setAuth(isAuth:boolean){
        if(isAuth){
            this.isAuthenticated = isAuth;
        }else {
            this.isAuthenticated = false;
        }
    },
    setUser(user: userType | null){
        if(user){
            this.user = user;
        }else {
            this.user = {}
        }
    }
  },
})

After defining pinia, go to the login interface and use
login.vue: Here I only show the part of using pinia

First we need to import what we defined in pinia

import { useAuthStore } from "../store";
const store = useAuthStore();

After parsing the token, the information is stored in the decode, and then the corresponding parameters are directly passed in through the setAuth and setUser methods of the store

 // 解析token
        const decode: userType = jwt_decode(token);

        store.setAuth(!!decode);
        store.setUser(decode);

effect realization

When there is no login, that is, there is no token yet, we check the console vue:
you can see that the login status in the figure below is false, and the user information user is also empty.

Then we click login, and the token has been saved at this time, and then check the console
It can be seen that the user's information and login status have been obtained

. After the user logs in, we save the user's information in pinia, so that the user information can be easily called for other operations in the management system~