浅尝Vue最新状态管理工具Pinia(实战使用Pinia管理登录状态)

什么是pinia

pinia其实就是Vuex5,这是尤雨溪老师在直播中提到的，所以它俩是一致的东西，只是vuex第五个版本之后就叫pinia了。Pinia官方文档传送门
官方文档首页是很可爱的小菠萝

pinia是同时支持vue2和vue3的，vuex4只支持vue3的 Composition API，所以这点来看pinia的支持性是非常好的

核心语法

pinia的核心语法有State，Getters，Actions，Plugins以及Stores outside of components（在组件外进行调用）。可以发现跟vuex4相比，pinia少了一个Mutation，在pinia中，是直接使用actions去做状态的修改。在actions中以前我们是通过state.去获得状态，而在这里可以直接通过this. 获取状态

起步

安装pinia

yarn add pinia
或者使用 npm
npm install pinia
1
2
3

可以在src下新建一个store文件夹 用来存放pinia相关的东西
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++
    },
  },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

访问state

我们可以直接通过state.访问

const store = useStore()

store.counter++
1
2
3

使用Getters

要注意，在pinia中，Getters和state里面不能使用相同的名字

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
})
1
2
3
4
5
6
7
8

Actions

定义和处理业务逻辑

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    },
    randomizeCounter() {
      this.counter = Math.round(100 * Math.random())
    },
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13

Pinia实战-登录状态的管理

新建store文件，在下面index.ts中编辑pinia的使用：

1. 在state中定义了isAuthenticated表示登录状态，对象user中存放登录的用户信息，初始状态为空
2. 在actions中进行定义，setAuth方法判断isAuth的值控制用户的登录状态，setUser方法将用户的信息写入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 = {}
        }
    }
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

定义好了pinia，然后去登录界面使用
login.vue: 这里我就只展示使用pinia的部分了

首先要引入我们在pinia中定义的东西

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

解析token之后，信息保存在decode之中，然后直接通过store的setAuth和setUser方法传入对应的参数

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

        store.setAuth(!!decode);
        store.setUser(decode);
1
2
3
4
5

效果实现

在没有登录的时候，也就是还没有token，我们查看控制台vue：
可以看到下图登录状态为false，用户信息user中也为空

然后我们点击登录，此时token已经保存，然后查看控制台
可以看到，用户的信息以及登录状态都获取到了

用户登录之后，我们将用户的信息保存到pinia中，这样在管理系统中可以很方便的调用用户信息进行其他的操作~