快捷導(dǎo)航

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

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

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

1. 安裝pinia

npm install pinia

2. 配置pinia

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

index.js文件

使用一個 index 文件進行統(tǒng)一的導(dǎo)出，就不需要在使用多個倉庫的時候?qū)懚鄠€ import 了。

import { createPinia } from "pinia";
// 導(dǎo)出modules下面的所有倉庫
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的寫法是沒有重置功能的，需要單獨寫一個 $reset 的方法重置數(shù)據(jù)。

modules下面的倉庫文件

// 創(chuàng)建用戶信息倉庫
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倉庫

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

app.mount('#app')

vue頁面的使用

<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種寫法
const changeName1 = () => {
  // 第一種 => 直接賦值
  user.name = '李四'
  // 第二種 => 使用$patch
  user.$patch({
    name: '李四'
  })
  // 第三種 => 使用倉庫里面的方法
  user.changeName('李四')
};


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

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

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

3. 持久化的插件使用

存儲在倉庫的數(shù)據(jù)如果刷新頁面會丟失，之前都是手動將每個值存到本地存儲中 localStorage 或者sessionStorage 種。pinia-plugin-persistedstate 插件是讓倉庫中的數(shù)據(jù)自動存儲到本地存儲中。

4. pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

5. 配置持久化插件

在 store 下面的 index.js 文件中編寫。

第一種方法

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

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

第二種方法

每個倉庫單獨配置持久化的配置 => 將 auto: true 刪除。

在 modules 下面的 user.js 文件中編寫。

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

持久化配置方式如下：

1. 第一種配置
persist： true  // 整個倉庫持久化

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

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

4. 第四種配置
persist: {
    key: 'my-userinfo' 存儲的名稱
}

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

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