前言 最近新開了個項目，以前老項目都是vue2+vuex開發的，都說用vue3+pinia爽得多，那新項目就vue3+pinia吧。這裡記錄一下pinia的使用。 使用方法 安裝pinia: npm i pinia main.js中引入pinia: //main.js import { create ...
前言
最近新開了個項目，以前老項目都是vue2+vuex開發的，都說用vue3+pinia爽得多，那新項目就vue3+pinia吧。這裡記錄一下pinia的使用。
使用方法
- 安裝pinia:
npm i pinia
- main.js中引入pinia:
//main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app')
- 創建store倉庫：
-
在src下創建store目錄，目錄下創建index.js文件:
-
在index.js中利用pinia的defineStore方法創建倉庫，一般使用只會用到defineStore的前兩個參數(第三個參數可做持久化配置)，下麵是setup組合式寫法(你也可以改為選項式寫法)。
-
第一個參數為一個字元串，作為倉庫的唯一id；第二個參數為一個方法，內部可定義需要存儲的數據，定義完成後返回即可，你可以在此處定義多個數據，也可在defineStore之外多次使用defineStore創建多個倉庫。
-
定義的時候有幾個取巧的辦法：可以使用ref給數據添加響應式特性。只需定義set方法，無需定義get方法。
// /store/index.js
import { defineStore } from "pinia";
import { ref } from "vue";
export const piniaStore = defineStore(
"piniaStore",
() => {
const pageData = ref(1);//頁面數據
const setPageData = () => {
pageData.value = pageData.value * 2;
};//設置頁面數據
return {
pageData,
setPageData
};
},
);
- 頁面使用
- 使用倉庫前必須先引入倉庫創建store。
- 獲取倉庫數據可藉助計算屬性computed直接取出。
- 修改倉庫數據可直接調用返回的對應set方法即可，此處方法沒有傳參直接在倉庫內部修改的數據，你也可以傳參使用外部數據修改。
<template>
<h1>{{ pageData }}</h1>
<button @click="setData">設置數據</button>
</template>
<script setup>
import { computed } from 'vue';
import { piniaStore } from '@/store/index.js';
let store = piniaStore(),//獲取倉庫
pageData = computed(() => {
return store.pageData;//獲取倉庫中的數據
});
const setData = () => {
store.setPageData();//設置倉庫中的數據
};
</script>
點擊前頁面顯示：
點擊後頁面顯示：
- 到此處其實你就已經學會使用pinia了，比vuex簡單多了吧？但我當前項目需要對數據進行持久化處理，不處理頁面刷新之後數據全部會重置，無法保存狀態。
持久化
- 其實可以直接使用sessionStorage或localstorage實現前端數據持久化。
- 但數據一旦多了，你會發現代碼裡面全是setItem、getItem，會有大量的重覆代碼。
- 有人說直接封裝不久得了？就像這樣：
//storeTools.js
//寫入倉庫
export const setStore = (key, value) => {
sessionStorage.setItem(key, JSON.stringify(value));
}
//讀取倉庫
export const getStore = (key) => {
return JSON.parse(sessionStorage.getItem(key));
}
//清除所有倉庫
export const clearStore = () => {
sessionStorage.clear();
}
- 當然你也可以這樣做，但在有輪子的情況下，我還是傾向於直接用輪子的，況且輪子提供的功能遠比自己封裝的方法多。
- 下麵是pinia的持久化步驟：
- 安裝插件：
npm i pinia-plugin-persistedstate
- main.js引入插件:
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import App from './App.vue';
const app = createApp(App);
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);//pinia持久化
app.use(pinia);
app.mount('#app')
- pinia配置插件，其實就是利用pinia中defineStore方法的第三個參數，直接傳入一個對象persist，對象中enabled表示啟用持久化，storage表示持久化方式(可選sessionStorage、localstorage)：
import { defineStore } from "pinia";
import { ref } from "vue";
export const piniaStore = defineStore(
"piniaStore",
() => {
const pageData = ref(1);//頁面數據
const setPageData = () => {
pageData.value = pageData.value * 2;
};//設置頁面數據
return {
pageData,
setPageData
};
},
{
persist: {
enabled: true,
storage: sessionStorage,
}
}
);
- 現在再操作頁面後，數據會保存在sessionStorage中，刷新數據不會重置丟失。
結語
其實vuex也有自己的持久化方法，但我還是傾向於pinia，畢竟更簡潔方便了。
原文鏈接：https://xiblogs.top/?id=64
