快捷導(dǎo)航

Vue3中的存儲(chǔ)庫pinia概述

更新時(shí)間：2025年06月27日 16:00:43 作者：昭南。

Pinia是Vue3的狀態(tài)管理庫,替代Vuex,支持跨組件共享狀態(tài)、修改數(shù)據(jù)及持久化存儲(chǔ),通過pinia-plugin-persist插件實(shí)現(xiàn)數(shù)據(jù)持久化,需在main.ts和store配置中引入,本文給大家介紹Vue3中的存儲(chǔ)庫pinia,感興趣的朋友一起看看吧

1、pinia是什么？

如果你學(xué)過Vue2，那么你一定使用過Vuex。我們都知道Vuex在Vue2中主要充當(dāng)狀態(tài)管理的角色，所謂狀態(tài)管理，簡單來說就是一個(gè)存儲(chǔ)數(shù)據(jù)的地方，存放在Vuex中的數(shù)據(jù)在各個(gè)組件中都能訪問到，它是Vue生態(tài)中重要的組成部分。

在Vue3中，可以使用傳統(tǒng)的Vuex來實(shí)現(xiàn)狀態(tài)管理，也可以使用最新的pinia來實(shí)現(xiàn)狀態(tài)管理，我們來看看官網(wǎng)如何解釋pinia的。

Pinia 是 Vue 的存儲(chǔ)庫，它允許您跨組件/頁面共享狀態(tài)。

2.安裝

npm install pinia

3、main.ts使用

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
import { createPinia } from "pinia";
const pinia = createPinia();
app.use(pinia);
app.mount("#app");

4、使用store

// 想要使用必須先引入 defineStore；
import { defineStore } from 'pinia';
// 這里我們使用的是es6 的模塊化規(guī)范進(jìn)行導(dǎo)出的。
// defineStore 方法有兩個(gè)參數(shù)
// 第一個(gè)參數(shù)是模塊化名字（也就相當(dāng)于身份證一樣，不能重復(fù)）
// 第二個(gè)參數(shù)是選項(xiàng)，對象里面有三個(gè)屬性，相比于vuex 少了一個(gè) mutations.
export const useStore = defineStore('main', {
  state:()=> {  // 存放的就是模塊的變量
    return {
      name: "小豬課堂",
      age: 25,
      sex: "男",
      num:13
    }
  },
  getters: { // 相當(dāng)于vue里面的計(jì)算屬性，可以緩存數(shù)據(jù)
  },
  actions: { // 可以通過actions 方法，改變 state 里面的值。
  }
})

5、讀取state數(shù)據(jù)

<template>
  <p>姓名：{{ name }}</p>
  <p>年齡：{{ age }}</p>
  <p>性別：{{ sex }}</p>
</template>
<script setup lang="ts">
    import { ref } from "vue";
    import { useUsersStore } from "../src/store/user";
    const store = useUsersStore();
    const name = ref<string>(store.name);
    const age = ref<number>(store.age);
    const sex = ref<string>(store.sex);
</script>

解構(gòu)代碼如下：

<template>
  <h1>
    <!-- 使用pinia -->
    {{ count }} <br />
    {{ num }} <br />
    <input type="text" v-model="count">
  </h1>
</template>
<script lang="ts" setup>
// 引入pinia
import { useStoreIndex } from "@/store/index";
// storeToRefs將state中的變量解構(gòu)出來，解構(gòu)出來的數(shù)據(jù)是雙向聯(lián)動(dòng)的，是ref對象
import { storeToRefs } from "pinia";
let store = useStoreIndex()
// 兩種方法都可以解構(gòu)出來state數(shù)據(jù)，但是普通解構(gòu)出來的無法實(shí)現(xiàn)雙向聯(lián)動(dòng)
const { count, num } = storeToRefs(store);
</script>

6、修改多個(gè)數(shù)據(jù)

const handleAdd = () => {
  // 方法1
  // store.name=李四
  // 方法2：可以同時(shí)修改多個(gè)數(shù)據(jù)
  store.$patch({
    sex: store.sex + 1,
    num:store.num+10
  });
};

7、持久化存儲(chǔ)

7.1 安裝：pinia-plugin-persist

npm install pinia-plugin-persist

7.2 在main.ts中引入

// 1 引入pinia，并解構(gòu)賦值其中的createPinia 方法
import { createPinia } from 'pinia';
const pinia = createPinia();
// 引入持久化存儲(chǔ)插件
import piniaPersist from 'pinia-plugin-persist'
// 在pinia中使用持久化存儲(chǔ)插件
pinia.use(piniaPersist);
// 2 在vue實(shí)例中使用pinia
app.use(pinia)

7.3 在store/index.ts中引入.與state、actions同級(jí)

persist: { // 開啟存儲(chǔ)
    enabled: true,
    // 配置持久化
    strategies: [
      {
        // key是屬性，可以省略，省略默認(rèn)是defineStore第一個(gè)屬性main
        key:"zx",
        // 指定存儲(chǔ)的位置以及存儲(chǔ)的變量都有哪些，該屬性可以不寫，
        //在不寫的情況下，默認(rèn)存儲(chǔ)到 sessionStorage 里面,默認(rèn)存儲(chǔ) state 里面的所有數(shù)據(jù)。
        storage: localStorage,
        // paths 是一個(gè)數(shù)組，如果寫了 就會(huì)只存儲(chǔ) count 變量，當(dāng)然也可以寫多個(gè)。
        paths: ["count", "num", "token", "userName"]
      },
    ]
  },

到此這篇關(guān)于Vue3中的存儲(chǔ)庫pinia概述的文章就介紹到這了,更多相關(guān)Vue3 pinia內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: