Vue新一代狀態(tài)管理工具Pinia的具體使用

3403771864 發(fā)布于2022-09-08 22:14 / 944人閱讀

　　很多人都在問 pinia是什么？其實(shí)它是一個(gè)類似的插件，是vuex的最新一代的輕量級狀態(tài)管理插件，建議安利在很多新項(xiàng)目中其中pinia。

　　Pinia 的優(yōu)點(diǎn)

　　簡便，存儲和組件變得很類似，你可以輕松寫出優(yōu)雅的存儲。

　　類型安全，通過類型推斷，可以提供自動完成的功能。

　　vue devtools 支持，可以方便進(jìn)行調(diào)試。

　　Pinia 支持?jǐn)U展，可以非常方便地通過本地存儲，事物等進(jìn)行擴(kuò)展。

　　模塊化設(shè)計(jì)，通過構(gòu)建多個(gè)存儲模塊，可以讓程序自動拆分它們。

　　非常輕巧，只有大約 1kb 的大小。

　　服務(wù)器端渲染支持。

　　起步安裝

　　npm i pinia

　　核心語法

　　pinia的核心語法有State，Getters，Actions，Plugins以及Stores outside of components（在組件外進(jìn)行調(diào)用）。可以發(fā)現(xiàn)跟vuex4相比，pinia少了一個(gè)Mutation，在pinia中，是直接使用actions去做狀態(tài)的修改。在actions中以前我們是通過state.去獲得狀態(tài)，而在這里可以直接通過this. 獲取狀態(tài)

　　可以在src下新建一個(gè)store文件夾用來存放pinia相關(guān)的東西

　　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

　　　定義和處理業(yè)務(wù)邏輯

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

　　　　Pinia實(shí)戰(zhàn)-登錄狀態(tài)的管理

　　1、新建store文件，在下面index.ts中編輯pinia的使用：

　　2、在state中定義了isAuthenticated表示登錄狀態(tài)，對象user中存放登錄的用戶信息，初始狀態(tài)為空

　　在actions中進(jìn)行定義，setAuth方法判斷isAuth的值控制用戶的登錄狀態(tài)，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，然后去登錄界面使用

　　首先要引入我們在pinia中定義的東西

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

　　解析token之后，信息保存在decode之中，然后直接通過store的setAuth和setUser方法傳入對應(yīng)的參數(shù)

　　// 解析token
　　const decode: userType = jwt_decode(token);
　　store.setAuth(!!decode);
　　store.setUser(decode);

　　　　效果實(shí)現(xiàn)

　　在沒有登錄的時(shí)候，也就是還沒有token，我們查看控制臺vue：

　　可以看到下圖登錄狀態(tài)為false，用戶信息user中也為空

　　然后我們點(diǎn)擊登錄，此時(shí)token已經(jīng)保存，然后查看控制臺

　　可以看到，用戶的信息以及登錄狀態(tài)都獲取到了

　　　　同 vuex 的比較

　　Pinia 最初是為了探索 Vuex 下一次迭代可能會是什么樣子，結(jié)合了 Vuex 5 核心團(tuán)隊(duì)討論中的許多想法。最終，我們意識到 Pinia 已經(jīng)實(shí)現(xiàn)了我們在 Vuex 5 中想要的大部分內(nèi)容，并決定實(shí)現(xiàn)它取而代之的是新的建議。

　　與 Vuex 相比，Pinia 提供了一個(gè)更簡單的 API，具有更少的操作，提供了 Composition-API 風(fēng)格的 API，最重要的是，在與 TypeScript 一起使用時(shí)具有可靠的類型推斷支持。