Pinia

官網(wǎng)：https://pinia.vuejs.org/zh/

Pinia 是 Vue 的專屬狀態(tài)管理庫，相比Vuex更好用，優(yōu)點不多了說官網(wǎng)有，用起來最重要！

在應(yīng)用的根部注入創(chuàng)建的 pinia

// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

定義store，拿用戶登錄舉個簡單例子

在src目錄新建文件夾store，然后新建文件user.ts

import { defineStore } from 'pinia'
import { ref } from 'vue'
import { login } from '~/api/user'  
import { UserInfo } from '~/types/index' 

// 此處采用組合式API寫法
// Pinia 同樣支持選項式API寫法
export const useUserStore = defineStore(
  'user',
  () => {
    let username = ref('')

    async function userLogin(param: UserInfo) {
      const result = await login({ username: param.username, password: param.password })
      if (result) {
        username.value = param.username
      }
      return result
    }
    return { username, userLogin }
  }
)

在Vue頁面中使用Pinia

import { useUserStore } from '~/store/user'
...

const userStore = useUserStore()

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid: boolean) => {
    if (valid) {
      const result = await userStore.userLogin(param)

      if (result) {
        router.push('/')
      }
    }
  })
}
...

持久化插件pinia-plugin-persistedstate

如果我們把登錄用戶的信息放在Pinia中，那肯定需要做持久化，要不頁面一刷新，用戶信息就沒有了。

比較粗暴的做法就是直接使用localStorage/sessionStorage來保存用戶信息（連Pinia都不用），進階做法是當Pinia保存后再給localStorage保存一份，退出登錄時同時清理這兩處的數(shù)據(jù)。

更加優(yōu)雅的做法應(yīng)該是使用輪子，讓代碼更干凈可配置，來試試持久化插件吧，大家比較推薦的是pinia-plugin-persistedstate，更穩(wěn)定更少bug。

安裝 pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

修改配置

//main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' // 新增
import App from './App.vue'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)  // 新增
const app = createApp(App)

app.use(pinia)
app.mount('#app')

// store/user.ts
export const useUserStore = defineStore(
  'user',
  () => {
    let username = ref('')

    ...
    return { username, userLogin }
  },
  // 新增
  {
    persist: true
  }
)

這時再點擊登錄，localstorage就會新增user了 ??

如果想給key值改名

persist: { key: 'my-custom-key', },

如果你想把數(shù)據(jù)保存在sessioinStorage中，可以配置persist

persist: { storage: sessionStorage, },

給Tags頁簽組件增加持久化

本項目的頁簽組件Tags本來也沒有做持久化，刷新頁面時tag會丟失其他已打開的頁面，引入pinia-plugin-persistedstate 之后，只用在store/tags.ts 加入persist配置就好了。

 persist: {
    storage: sessionStorage
 },

更多的配置請參考官方文檔：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/config.html

踩坑

按照官方文檔配完應(yīng)該就可以按F12在localStorage中看到我剛才寫的user，然而又掉坑了，坑雖不大，記錄下也是應(yīng)該的。

因為疏于使用pinia，所以在寫store/user.ts的時候，直接照著官網(wǎng)文檔又來了一遍createPinia，然后把persistedstate插件掛在它身上，結(jié)果localStorage怎么也不出來。

?? 正確的做法是在main.ts掛載pinia的時候，把persistedstate插件掛上去，別的store文件就不要再createPinia了，一切OK！

小tips

還有一點需要注意，在使用組合式API寫法時，state定義需要使用ref，否則也會拿不到數(shù)據(jù)，所以千萬別寫成：

    let username = ref('')  // 正確
    let username = ''  // 錯誤

在 Setup Store 中：

• ref() 就是 state 屬性
• computed() 就是 getters
• function() 就是 actions

如果使用選項式API，就不用操心這個。養(yǎng)成習(xí)慣就好哈～

本項目GIT地址：github.com/lucidity99/…文章來源地址http://www.zghlxwxcb.cn/news/detail-447611.html

到了這里，關(guān)于從零開始Vue3+Element Plus后臺管理系統(tǒng)(六)——狀態(tài)管理Pinia和持久化的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！