pinia的使用

来源:https://www.cnblogs.com/xi12/archive/2023/11/09/17822142.html
-Advertisement-
Play Games

前言 最近新開了個項目,以前老項目都是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的使用。

使用方法

  1. 安裝pinia:
npm i pinia
  1. 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')
  1. 創建store倉庫:
  • 在src下創建store目錄,目錄下創建index.js文件:
    image

  • 在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
        };
    },
);
  1. 頁面使用
  • 使用倉庫前必須先引入倉庫創建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>

點擊前頁面顯示:
image
點擊後頁面顯示:
image

  • 到此處其實你就已經學會使用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的持久化步驟:
  1. 安裝插件:
npm i pinia-plugin-persistedstate
  1. 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')
  1. 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,
        }
    }
);
  1. 現在再操作頁面後,數據會保存在sessionStorage中,刷新數據不會重置丟失。
    image

結語

其實vuex也有自己的持久化方法,但我還是傾向於pinia,畢竟更簡潔方便了。
原文鏈接:https://xiblogs.top/?id=64


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • FTP 介紹 FTP是File Transfer Protocol的縮寫,譯為文件傳輸協議,是基於CS結構的應用層協議。其主要作用是在網路上的兩台電腦之間傳輸文件。 FTP傳輸層使用的是TCP協議,它有一個很大的特點是採用雙埠的工作模式,即客戶端和服務端的通信是通過兩個通道進行的 命令通道用於服 ...
  • MySQL總共支持四種連接方式訪問資料庫,如下表格所示,其中Linux平臺環境下,主要有兩種連接方式,一種是TCP/IP連接方式,另外一種是socket方式。Name pipe和Share memory是Windows平臺下獨有的連接方式。 那麼,MySQL資料庫中,我們能否查看會話具體使用的連接方 ...
  • 近日,由天翼雲科技有限公司雲網產品事業部天璣實驗室撰寫的《關於公有雲區分負載QoS感知的記憶體資源動態超分管理優化》(Thoth:Provisioning Overcommitted Memory Resource with Differentiated QoS in Public Clouds)論文... ...
  • 本文分享自華為雲社區《Proxy下的Prepare透傳,讓GaussDB(for MySQL)更穩固,性能更卓越》,作者: GaussDB 資料庫 。 1.引言 在很多業務場景下,資料庫應用程式處理大量相同的SQL語句——只需更改SQL語句中的文字或變數值。例如:使用相同的SQL模板進行WHERE查 ...
  • 本文目標是:瞭解查詢的核心原理,對比 SQL 查詢優化技巧在 h2database 中的落地實現。前提:為了貼近實際應用,本文 Code Insight 基於 BTree 存儲引擎。 ...
  • 在構建數據倉庫或做數據分析時,需要對原始數據的結構進行一定的處理,有時涉及到“行轉列”,有時涉及到“列轉行”,那麼這兩個轉換的方式具體是什麼,有什麼差異,怎麼實現。 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 在寫頁面的時候,發現表單裡面有一個省市區的 options 組件要寫,因為表單很多地方都會用到這個地址選擇,我便以為很簡單嘛。 雖然很簡單的一個功能,但是網路上能搜索到的教程大多都是需要配合 elementUI 等各種 UI 庫的,但是我 ...
  • 我們有沒有想過,是否有一種技術,伺服器可以主動將數據推送給客戶端進行渲染,而不再是客戶端向伺服器發出請求等待返回結果呢?接下來,讓我們一起瞭解weboskcet ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...