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

简介: pinia是vue新的状态管理工具,也称作vuex5,本文讲解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

可以在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++
    },
  },
})

访问state

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

const store = useStore()

store.counter++

使用Getters

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

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

Actions

定义和处理业务逻辑

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

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 = {}
        }
    }
  },
})

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

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

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

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

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

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

效果实现

在没有登录的时候,也就是还没有token,我们查看控制台vue:
可以看到下图登录状态为false,用户信息user中也为空
在这里插入图片描述
然后我们点击登录,此时token已经保存,然后查看控制台
可以看到,用户的信息以及登录状态都获取到了
在这里插入图片描述
用户登录之后,我们将用户的信息保存到pinia中,这样在管理系统中可以很方便的调用用户信息进行其他的操作~

相关文章
|
2天前
|
JavaScript
|
4天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
18 6
|
1天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
10 2
|
4天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
15 4
|
4天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
11 1
|
4天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
15 1
|
4天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
11 0
|
4天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue】自定义指令实现 复制、长按、水印 功能
【vue】自定义指令实现 复制、长按、水印 功能
9 0
|
4天前
|
JavaScript
【vue】图片懒加载 vue-lazyload 使用
【vue】图片懒加载 vue-lazyload 使用
8 0
|
4天前
|
JavaScript
【vue】 vue如何根据不同路由地址更改页面的标题
【vue】 vue如何根据不同路由地址更改页面的标题
5 0