快捷導(dǎo)航

Vue3中pinia的使用與持久化處理詳解

更新時(shí)間：2023年07月28日 14:53:44 作者：不禿大師

Pinia?是一個(gè)基于?Vue?3?的狀態(tài)管理庫，可以更好地支持?TypeScript?和更靈活的狀態(tài)管理方式，本文主要介紹了pinia的使用與持久化處理，需要的可以參考一下

簡(jiǎn)單記錄一下學(xué)習(xí)pinia的過程

1.Pinia是什么？

Pinia 是一個(gè)基于 Vue 3 的狀態(tài)管理庫。與 Vue 2 中的 Vuex 不同，Pinia 使用了 Vue 3 中的 Composition API，因此可以更好地支持 TypeScript 和更靈活的狀態(tài)管理方式。

2.Pinia有什么特點(diǎn)？

簡(jiǎn)單并且易于使用，它的 API 設(shè)計(jì)是針對(duì) Composition API 的，因此可以方便地使用 Vue 3 的新特性。
支持 TypeScript，并且提供了強(qiáng)類型的定義，可以在編譯時(shí)捕獲錯(cuò)誤。
支持插件機(jī)制，可以輕松地?cái)U(kuò)展它的功能。
支持多個(gè) store 實(shí)例，每個(gè) store 實(shí)例都可以擁有自己的狀態(tài)和行為。
支持持久化存儲(chǔ)，可以將 store 中的數(shù)據(jù)保存在本地存儲(chǔ)中，以便在頁面刷新后仍然可以訪問。

服用方法

1.安裝 pinia

bashyarn add pinia#或者使用 npmnpm install pinia

2.在 main.ts/js文件里面進(jìn)行配置

import { createApp } from 'vue'
++ import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './assets/main.css'
const app = createApp(App)
++ const pinia = createPinia()
++ app.use(pinia)
app.use(router)
app.mount('#app')

在main.ts/js文件內(nèi)引入Pinia的createPinia()函數(shù)

import { createPinia } from 'pinia'

并且使用createApp(App).use()傳遞給應(yīng)用。

const pinia = createPinia()
app.use(pinia)

3.創(chuàng)建 Pinia 存儲(chǔ) 在你的應(yīng)用程序中，你需要?jiǎng)?chuàng)建一個(gè) Pinia 存儲(chǔ)來管理你的狀態(tài)。你可以使用 createPinia() 函數(shù)來創(chuàng)建一個(gè) Pinia 實(shí)例

在src目錄下新建/stores/counter.js 文件.

import { ref, computed } from "vue";
import { defineStore } from "pinia";
// 選項(xiàng)式寫法
// export const useCounterStore = defineStore(
//   "counter",
//   {
//     state: () => ({ count: 0 }),
//     // state: () => {
//     //   return { count: 0 }
//     // },
//     actions: {
//       increment() {
//         this.count++;
//       },
//     },
//   }
// );
// 組合式寫法 
export const useCounterStore = defineStore(
  "counter",
  () => {
    const count = ref(0);
    const increment =()=> {
      count.value++;
    }
    return {
      count,
      increment
    };
  },
  {
  //...更多配置
  }
);

由于Pinia支持Composition API 所以平時(shí)會(huì)用組合式寫法。在上面代碼中defineStore有三個(gè)參數(shù)：

第一個(gè)參數(shù)：storeName 類型：String 描述：store的名稱。標(biāo)識(shí)該store的唯一性
第二個(gè)參數(shù)：setup 類型: () => StoreDefinition<State, Getters, Actions, StoreOptions>描述：類似Vue組件中setup()函數(shù)
第三個(gè)參數(shù)：storestoreOptions（可選）類型：StoreOptions 描述：一個(gè)對(duì)象，包含一些 store 的選項(xiàng)

簡(jiǎn)單來說第一個(gè)參數(shù)像是一個(gè)id 給某個(gè)store綁定上，給這個(gè)倉庫唯一化。第二個(gè)參數(shù)規(guī)定了倉庫里面的初始值以及變化值。第三個(gè)參數(shù) 是個(gè)配置選項(xiàng)，例如 persist（是否啟用持久化存儲(chǔ)）、devtools（是否啟用開發(fā)工具）等。最后使用export 拋出useCounterStore 方法

4.Pinia的使用在組件中使用Pinia

<script setup>
++ import { useCounterStore } from '@/stores/counter'
++ const counter = useCounterStore()
++ const clickHanlde=()=>{
++  counter.increment()
++ }
</script>
<template>
  <!-- 直接從 store 中訪問 state -->
++  <div>Current Count: {{ counter.count }}</div>
++  <button @click="clickHanlde">加1</button>
</template>
<style scoped>
</style>

從剛才定義的counter.js文件里引入useCounterStore()方法打印了一下發(fā)現(xiàn)控制臺(tái)可以正常拿到響應(yīng)式數(shù)據(jù)

并且定義一個(gè)變量存儲(chǔ)。同時(shí)定義一個(gè)點(diǎn)擊事件的函數(shù)

import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
const clickHanlde=()=>{
  counter.increment()
}

在這個(gè) clickHandle函數(shù)里面使用counter中我們定義的action 叫做"increment"的方法

使用 template模板寫頁面

<template>
  <!-- 直接從 store 中訪問 state -->
  <div>Current Count: {{ counter.count }}</div>
  <button @click="clickHanlde">增加</button>
</template>

在模板里面使用{{ counter.xxx }}可以正常取到我們放入pinia的數(shù)據(jù) 此時(shí) 當(dāng)點(diǎn)擊按鈕“加1”時(shí) store里面的count會(huì)在原來的基礎(chǔ)上++

我們發(fā)現(xiàn)此時(shí)count 已經(jīng)增加了

此時(shí)刷新瀏覽器，發(fā)現(xiàn)count還是為0，瀏覽器并沒有替我們將count 放在儲(chǔ)存空間內(nèi)。

解決方案：由于pinia里沒有自帶的持久化存儲(chǔ)，所以我們需要使用要持久化存儲(chǔ)的插件 pinia-plugin-persistedstate npm地址：pinia-plugin-persistedstate 文檔入口:pinia-plugin-persistedstate

1.安裝 pinia-plugin-persistedstate 插件

npm i pinia-plugin-persistedstate
#或者使用 npm
yarn add pinia-plugin-persistedstate

2.安裝完成后需要在main.ts/js文件內(nèi)進(jìn)行配置

import { createApp } from 'vue'
import { createPinia } from 'pinia'
++ import piniaPluginPersistedstate  from 'pinia-plugin-persistedstate'
import App from './App.vue'
import router from './router'
import './assets/main.css'
const app = createApp(App)
const pinia = createPinia()
++ pinia.use(piniaPluginPersistedstate)
app.use(pinia)
app.use(router)
app.mount('#app')

引入了piniaPluginPersistedstate 并且使用app.use()傳遞給了應(yīng)用程序。

3.最后再store里面添加配置選項(xiàng)

import { ref, computed } from "vue";
import { defineStore } from "pinia";
// 選項(xiàng)式寫法
// export const useCounterStore = defineStore(
//   "counter",
//   {
//     state: () => ({ count: 0 }),
//     // state: () => {
//     //   return { count: 0 }
//     // },
//     // 也可以這樣定義
//     // state: () => ({ count: 0 })
++//     persist: true,
//     actions: {
//       increment() {
//         this.count++;
//       },
//     },
//   }
// );
// 組合式寫法 
export const useCounterStore = defineStore(
  "counter",
  () => {
    const count = ref(0);
    const increment =()=> {
      count.value++;
    }
    return {
      count,
      increment
    };
  },
  {
++    persist: true,
  },
);

也就是傳說中defineStore的第三個(gè)參數(shù)里面的配置項(xiàng)

此時(shí)pinia已經(jīng)可以正常使用替我們存儲(chǔ)數(shù)據(jù) 并且也完成了持久化的配置

以上就是Vue3中pinia的使用與持久化處理詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue3 pinia的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: