Pinia簡(jiǎn)單使用以及數(shù)據(jù)持久化詳解

更新時(shí)間：2022年05月30日 09:31:15 作者：壹個(gè)切圖仔

最近正在使用Pinia進(jìn)行狀態(tài)管理,我希望在重新刷新頁(yè)面時(shí)保持狀態(tài),下面這篇文章主要給大家介紹了關(guān)于Pinia簡(jiǎn)單使用以及數(shù)據(jù)持久化的相關(guān)資料,需要的朋友可以參考下

基本介紹

Pinia 是 Vue.js 的輕量級(jí)狀態(tài)管理庫(kù)

官方網(wǎng)站：pinia.vuejs.org/

pinia和vuex4一樣，也是vue官方的狀態(tài)管理工具(作者是 Vue 核心團(tuán)隊(duì)成員）
pinia相比vuex4，對(duì)于vue3的兼容性更好
pinia相比vuex4，具備完善的類型推薦
pinia同樣支持vue開發(fā)者工具,最新的開發(fā)者工具對(duì)vuex4支持不好

pinia核心概念

state: 狀態(tài)
actions: 修改狀態(tài)（包括同步和異步，pinia中沒有mutations）
getters: 計(jì)算屬性

基本使用與state

目標(biāo)：掌握pinia的使用步驟

（1）安裝

yarn add pinia
# or
npm i pinia

（2）在main.js中掛載pinia

import { createApp } from 'vue'
import App from './App.vue'

import { createPinia } from 'pinia'
const pinia = createPinia()

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

（3）新建文件store/counter.js

import { defineStore } from 'pinia'
// 創(chuàng)建store,命名規(guī)則： useXxxxStore
// 參數(shù)1：store的唯一表示
// 參數(shù)2：對(duì)象，可以提供state actions getters
const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
  getters: {
   
  },
  actions: {
    
  },
})

export default useCounterStore

(4) 在組件中使用

<script setup>
import useCounterStore from './store/counter'

const counter = useCounterStore()
</script>

<template>
  <h1>根組件---{{ counter.count }}</h1>
</template>

<style></style>

actions的使用

目標(biāo)：掌握pinia中actions的使用

在pinia中沒有mutations，只有actions，不管是同步還是異步的代碼，都可以在actions中完成。

（1）在actions中提供方法并且修改數(shù)據(jù)

import { defineStore } from 'pinia'
// 1. 創(chuàng)建store
// 參數(shù)1：store的唯一表示
// 參數(shù)2：對(duì)象，可以提供state actions getters
const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
  actions: {
    increment() {
      this.count++
    },
    incrementAsync() {
      setTimeout(() => {
        this.count++
      }, 1000)
    },
  },
})

export default useCounterStore

（2）在組件中使用

<script setup>
import useCounterStore from './store/counter'

const counter = useCounterStore()
</script>

<template>
  <h1>根組件---{{ counter.count }}</h1>
  <button @click="counter.increment">加1</button>
  <button @click="counter.incrementAsync">異步加1</button>
</template>

getters的使用

pinia中的getters和vuex中的基本是一樣的，也帶有緩存的功能

（1）在getters中提供計(jì)算屬性

import { defineStore } from 'pinia'
// 1. 創(chuàng)建store
// 參數(shù)1：store的唯一表示
// 參數(shù)2：對(duì)象，可以提供state actions getters
const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
  getters: {
    double() {
      return this.count * 2
    },
  },
  actions: {
    increment() {
      this.count++
    },
    incrementAsync() {
      setTimeout(() => {
        this.count++
      }, 1000)
    },
  },
})

export default useCounterStore

(2)在組件中使用

  <h1>根組件---{{ counter.count }}</h1>
  <h3>{{ counter.double }}</h3>

storeToRefs的使用

目標(biāo)：掌握storeToRefs的使用

如果直接從pinia中解構(gòu)數(shù)據(jù)，會(huì)丟失響應(yīng)式，使用storeToRefs可以保證解構(gòu)出來(lái)的數(shù)據(jù)也是響應(yīng)式的

<script setup>
import { storeToRefs } from 'pinia'
import useCounterStore from './store/counter'

const counter = useCounterStore()
// 如果直接從pinia中解構(gòu)數(shù)據(jù)，會(huì)丟失響應(yīng)式
const { count, double } = counter

// 使用storeToRefs可以保證解構(gòu)出來(lái)的數(shù)據(jù)也是響應(yīng)式的
const { count, double } = storeToRefs(counter)
</script>

pinia模塊化

在復(fù)雜項(xiàng)目中，不可能把多個(gè)模塊的數(shù)據(jù)都定義到一個(gè)store中，一般來(lái)說(shuō)會(huì)一個(gè)模塊對(duì)應(yīng)一個(gè)store，最后通過(guò)一個(gè)根store進(jìn)行整合

（1）新建store/user.js文件

import { defineStore } from 'pinia'

const useUserStore = defineStore('user', {
  state: () => {
    return {
      name: 'zs',
      age: 100,
    }
  },
})

export default useUserStore

(2)新建store/index.js

import useUserStore from './user'
import useCounterStore from './counter'

// 統(tǒng)一導(dǎo)出useStore方法
export default function useStore() {
  return {
    user: useUserStore(),
    counter: useCounterStore(),
  }
}

（3）在組件中使用

<script setup>
import { storeToRefs } from 'pinia'
import useStore from './store'
const { counter } = useStore()

// 使用storeToRefs可以保證解構(gòu)出來(lái)的數(shù)據(jù)也是響應(yīng)式的
const { count, double } = storeToRefs(counter)
</script>

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

目標(biāo)： 通過(guò) Pinia 插件快速實(shí)現(xiàn)持久化存儲(chǔ)。

插件文檔：點(diǎn)擊查看

用法

安裝

yarn add pinia-plugin-persistedstate
or
npm i  pinia-plugin-persistedstate

使用插件 在main.ts中注冊(cè)

import { createApp } from "vue";
import App from "./App.vue";
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
createApp(App).use(pinia);

模塊開啟持久化

const useHomeStore = defineStore("home",{
  // 開啟數(shù)據(jù)持久化
  persist: true
  // ...省略
});

常見疑問

模塊做了持久化后，以后數(shù)據(jù)會(huì)不會(huì)變，怎么辦？
- 先讀取本地的數(shù)據(jù)，如果新的請(qǐng)求獲取到新數(shù)據(jù)，會(huì)自動(dòng)把新數(shù)據(jù)覆蓋掉舊的數(shù)據(jù)。
- 無(wú)需額外處理，插件會(huì)自己更新到最新數(shù)據(jù)。

進(jìn)階用法

需求：不想所有數(shù)據(jù)都持久化處理，能不能按需持久化所需數(shù)據(jù)，怎么辦？

可以用配置式寫法，按需緩存某些模塊的數(shù)據(jù)。

import { defineStore } from 'pinia'

export const useStore = defineStore('main', s{
  state: () => {
    return {
      someState: 'hello pinia',
      nested: {
        data: 'nested pinia',
      },
    }
  },
  // 所有數(shù)據(jù)持久化
  // persist: true,
  // 持久化存儲(chǔ)插件其他配置
  persist: {
    // 修改存儲(chǔ)中使用的鍵名稱，默認(rèn)為當(dāng)前 Store的 id
    key: 'storekey',
    // 修改為 sessionStorage，默認(rèn)為 localStorage
    storage: window.sessionStorage,
    // 部分持久化狀態(tài)的點(diǎn)符號(hào)路徑數(shù)組，[]意味著沒有狀態(tài)被持久化(默認(rèn)為undefined，持久化整個(gè)狀態(tài))
    paths: ['nested.data'],
  },
})