快捷導(dǎo)航

Pinia.js狀態(tài)管理器上手使用指南

更新時(shí)間：2022年07月07日 11:26:08 作者：小學(xué)生study

這篇文章主要為大家介紹了Pinia.js狀態(tài)管理器上手使用指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

Pinia.js 是新一代的狀態(tài)管理器，由 Vue.js團(tuán)隊(duì)中成員所開(kāi)發(fā)的，因此也被認(rèn)為是下一代的 Vuex，即 Vuex5.x，在 Vue3.0 的項(xiàng)目中使用也是備受推崇。

Pinia.js 有如下特點(diǎn)：

完整的 typescript 的支持；
足夠輕量，壓縮后的體積只有1.6kb;
去除 mutations，只有 state，getters，actions（這是我最喜歡的一個(gè)特點(diǎn)）；
actions 支持同步和異步；
沒(méi)有模塊嵌套，只有 store 的概念，store 之間可以自由使用，更好的代碼分割；
無(wú)需手動(dòng)添加 store，store 一旦創(chuàng)建便會(huì)自動(dòng)添加；

安裝

npm install pinia --save

創(chuàng)建 Store

新建 src/store 目錄并在其下面創(chuàng)建 index.ts，導(dǎo)出 store

// src/store/index.ts
import { createPinia } from 'pinia'
const store = createPinia()
export default store

在 main.ts 中引入并使用。

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app.use(store)

State

定義State

在 src/store 下面創(chuàng)建一個(gè)user.ts

//src/store/user.ts
import { defineStore } from 'pinia'
export const useUserStore = defineStore({
  id: 'user', // id必填，且需要唯一
  state: () => {
    return {
      name: '張三'
    }
  }
})

獲取 state

<template>
  <div>{{ userStore.name }}</div>
</template>
<script lang="ts" setup>
import { useUserStore } from '@/store/user'
const userStore = useUserStore()
</script>

也可以結(jié)合 computed 獲取。

const name = computed(() => userStore.name)

state 也可以使用解構(gòu)，但使用解構(gòu)會(huì)使其失去響應(yīng)式，這時(shí)候可以用 pinia 的 storeToRefs。

import { storeToRefs } from 'pinia'
const { name } = storeToRefs(userStore)

修改 state

可以像下面這樣直接修改 state

userStore.name = '李四'

但一般不建議這么做，建議通過(guò) actions 去修改 state，action 里可以直接通過(guò) this 訪問(wèn)。

export const useUserStore = defineStore({
  id: 'user',
  state: () => {
    return {
      name: '張三'
    }
  },
  actions: {
    updateName(name) {
      this.name = name
    }
  }
})

<script lang="ts" setup>
import { useUserStore } from '@/store/user'
const userStore = useUserStore()
userStore.updateName('李四')
</script>

Getters

export const useUserStore = defineStore({
 id: 'user',
 state: () => {
   return {
     name: '張三'
   }
 },
 getters: {
   fullName: (state) => {
     return state.name + '豐'
   }
 }
})

userStore.fullName // 張三豐

Actions

異步 action

action 可以像寫(xiě)一個(gè)簡(jiǎn)單的函數(shù)一樣支持 async/await 的語(yǔ)法，讓你愉快的應(yīng)付異步處理的場(chǎng)景。

export const useUserStore = defineStore({
  id: 'user',
  actions: {
    async login(account, pwd) {
      const { data } = await api.login(account, pwd)
      return data
    }
  }
})

action 間相互調(diào)用

action 間的相互調(diào)用，直接用 this 訪問(wèn)即可。

 export const useUserStore = defineStore({
  id: 'user',
  actions: {
    async login(account, pwd) {
      const { data } = await api.login(account, pwd)
      this.setData(data) // 調(diào)用另一個(gè) action 的方法
      return data
    },
    setData(data) {
      console.log(data)
    }
  }
})

在 action 里調(diào)用其他 store 里的 action 也比較簡(jiǎn)單，引入對(duì)應(yīng)的 store 后即可訪問(wèn)其內(nèi)部的方法了。

// src/store/user.ts
import { useAppStore } from './app'
export const useUserStore = defineStore({
  id: 'user',
  actions: {
    async login(account, pwd) {
      const { data } = await api.login(account, pwd)
      const appStore = useAppStore()
      appStore.setData(data) // 調(diào)用 app store 里的 action 方法
      return data
    }
  }
})

// src/store/app.ts
export const useAppStore = defineStore({
  id: 'app',
  actions: {
    setData(data) {
      console.log(data)
    }
  }
})

數(shù)據(jù)持久化

插件 pinia-plugin-persist 可以輔助實(shí)現(xiàn)數(shù)據(jù)持久化功能。

安裝

npm i pinia-plugin-persist --save

使用

// src/store/index.ts
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export default store

接著在對(duì)應(yīng)的 store 里開(kāi)啟 persist 即可。

export const useUserStore = defineStore({
  id: 'user',
  state: () => {
    return {
      name: '張三'
    }
  },
  // 開(kāi)啟數(shù)據(jù)緩存
  persist: {
    enabled: true
  }
})

數(shù)據(jù)默認(rèn)存在 sessionStorage 里，并且會(huì)以 store 的 id 作為 key。

自定義 key

你也可以在 strategies 里自定義 key 值，并將存放位置由 sessionStorage 改為 localStorage。

persist: {
  enabled: true,
  strategies: [
    {
      key: 'my_user',
      storage: localStorage,
    }
  ]
}

持久化部分 state

默認(rèn)所有 state 都會(huì)進(jìn)行緩存，你可以通過(guò) paths 指定要持久化的字段，其他的則不會(huì)進(jìn)行持久化。

state: () => {
  return {
    name: '張三',
    age: 18,
    gender: '男'
  }  
},
persist: {
  enabled: true,
  strategies: [
    {
      storage: localStorage,
      paths: ['name', 'age']
    }
  ]
}

上面我們只持久化 name 和 age，并將其改為localStorage, 而 gender 不會(huì)被持久化，如果其狀態(tài)發(fā)送更改，頁(yè)面刷新時(shí)將會(huì)丟失，重新回到初始狀態(tài)，而 name 和 age 則不會(huì)。