快捷導(dǎo)航

vue3基礎(chǔ)教程之pinia配置和用法

更新時(shí)間：2025年06月14日 10:22:50 作者：Ares_前端

Vue3項(xiàng)目常用Pinia管理狀態(tài),通過(guò)安裝和配置實(shí)現(xiàn)數(shù)據(jù)持久化,這篇文章主要介紹了vue3基礎(chǔ)教程之pinia配置和用法的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

1. 安裝pinia

npm install pinia

2. 配置pinia

創(chuàng)建 store 文件夾，在里面創(chuàng)建 index.js ，在 store 下面創(chuàng)建 modules 文件夾，用來(lái)管理不同倉(cāng)庫(kù)。

index.js文件

使用一個(gè) index 文件進(jìn)行統(tǒng)一的導(dǎo)出，就不需要在使用多個(gè)倉(cāng)庫(kù)的時(shí)候?qū)懚鄠€(gè) import 了。

import { createPinia } from "pinia";
// 導(dǎo)出modules下面的所有倉(cāng)庫(kù)
import { userStore } from "./modules/user"
...
...

const pinia = createPinia()

// 組合api添加$reset方法，用于重置狀態(tài)
pinia.use(({ store }) => {
  const initialState = JSON.parse(JSON.stringify(store.$state))
  store.$reset = () => {
    store.$patch(initialState)
  }
})

export default pinia

export { userStore }

組合api的寫(xiě)法是沒(méi)有重置功能的，需要單獨(dú)寫(xiě)一個(gè) $reset 的方法重置數(shù)據(jù)。

modules下面的倉(cāng)庫(kù)文件

// 創(chuàng)建用戶信息倉(cāng)庫(kù)
import { defineStore } from 'pinia'
export const userStore = defineStore('user', () => {
  let name = ref('張三')
  let age = ref(18)
  let obj = reactive({
    username: '韓梅梅',
    address: '北京'
  })

  const changeName = (val) => {
    name.value = val
  }

  return {
    name,
    age,
    obj,
    changeName
  }
})

main.js中引入pinia倉(cāng)庫(kù)

...
import pinia from '@/store'
app.use(pinia)
...

app.mount('#app')

vue頁(yè)面的使用

<template>
  <div>
    <div>{{ user.name }}</div>
    <el-button type="primary" @click="changeName1">修改姓名</el-button>
    <div>{{ age }}</div>
    <el-button type="primary" @click="changeName2">修改年齡</el-button>
  </div>
</template>

<script setup>
import { userStore } from '@/store'
import { storeToRefs } from 'pinia' 
const user = userStore()

// 修改里面的值有3種寫(xiě)法
const changeName1 = () => {
  // 第一種 => 直接賦值
  user.name = '李四'
  // 第二種 => 使用$patch
  user.$patch({
    name: '李四'
  })
  // 第三種 => 使用倉(cāng)庫(kù)里面的方法
  user.changeName('李四')
};


// 如果是使用解構(gòu)的方式取值的話需要使用這個(gè)方法,否則取出來(lái)的值不是響應(yīng)式的
let { age } = storeToRefs(user)
// 修改年齡
const changeName2 = () => {
    age.value++
}

// 使用重置方法
const reset = () => {
  user.$reset();
}
</script>

storeToRefs 這個(gè)方法是修改解構(gòu)賦值的方法從倉(cāng)庫(kù)取值，讓取出來(lái)的值也是響應(yīng)式的。

3. 持久化的插件使用

存儲(chǔ)在倉(cāng)庫(kù)的數(shù)據(jù)如果刷新頁(yè)面會(huì)丟失，之前都是手動(dòng)將每個(gè)值存到本地存儲(chǔ)中 localStorage 或者sessionStorage 種。pinia-plugin-persistedstate 插件是讓倉(cāng)庫(kù)中的數(shù)據(jù)自動(dòng)存儲(chǔ)到本地存儲(chǔ)中。

4. pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

5. 配置持久化插件

在 store 下面的 index.js 文件中編寫(xiě)。

第一種方法

如果所有倉(cāng)庫(kù)中的數(shù)據(jù)都需要存儲(chǔ)的情況下。

import { createPersistedState } from 'pinia-plugin-persistedstate' // 引入方法
pinia.use(createPersistedState({  
    storage: localStorage, 
    auto: true  // 自動(dòng)存儲(chǔ)所有倉(cāng)庫(kù)數(shù)據(jù)到localStorage
}))

第二種方法

每個(gè)倉(cāng)庫(kù)單獨(dú)配置持久化的配置 => 將 auto: true 刪除。

在 modules 下面的 user.js 文件中編寫(xiě)。

// 創(chuàng)建用戶信息倉(cāng)庫(kù)
import { defineStore } from 'pinia'
export const userStore = defineStore('user', () => {
  ...
  ...
}, {
  // 在這個(gè)地方配置持久化
  persist: {
    ... 持久化配置如下
  }
})

持久化配置方式如下：

1. 第一種配置
persist： true  // 整個(gè)倉(cāng)庫(kù)持久化

2. 第二種配置 (pick 和 omit 二選一)
persist: {
    pick: ['obj.username', 'name'],  // 存儲(chǔ)哪些
    omit: ['obj.address']  // 忽略哪些不存儲(chǔ)
}

3. 第三種配置
persist: {
    storage: sessionStorage 存儲(chǔ)的位置
}

4. 第四種配置
persist: {
    key: 'my-userinfo' 存儲(chǔ)的名稱(chēng)
}

5. 第五種配置 (一個(gè)倉(cāng)庫(kù)每個(gè)參數(shù)不同的存儲(chǔ)方式)
persist: [
    {
      pick: ['name'],
      storage: localStorage,
      key: 'name'
    },
    {
      pick: ['age'],
      storage: sessionStorage,
      key: 'age'
    }
]

以上就是 pinia 和 pinia-plugin-persistedstate 插件的使用方式。