【UniApp】-uni-app-pinia儲存資料

BNTang發表於2023-12-19

前言

  • 經過上個章節的介紹,大家可以瞭解到 uni-app-資料快取 的基本使用方法
  • 那本章節來給大家介紹一下 uni-app-pinia儲存資料 的基本使用方法
  • 經過我這麼多篇章的介紹,我發現大家環境比較耗時,所以在今後的文章中,我會盡量減少環境的搭建
  • 如果某一篇的文章環境確實是不一樣的,我會在文章中說明,然後編寫對應的搭建過程

本文的由來呢,就是因為在 Vue2 中與 Vue3 中都可以使用 Vuex 來進行資料的儲存, 但是在 Vue3 出現了 Pinia,所以我就想著在 uni-app 中使用 Pinia 來進行資料的儲存。

步入正題

首先來給大家看看官方文件吧,在文件中找到, uni-app -> 教程 -> vue語法,先來看 Vue2:

可以從圖中看到,在 Vue2 當中的儲存方式只有 Vuex,然後再來看看 Vue3:

多了一個 Pinia,好,知道了這些內容之後我就來開始寫程式碼編寫示例,帶大家過一遍。

  • 使用 UniApp 建立的專案是內建了 Pinia,Vue2 專案暫不支援

根據官方文件的介紹,首先我們需要搭建一個對應的目錄結構:

├── pages
├── static
└── stores
    └── counter.js
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss

就是建立一個 stores 資料夾,在該資料夾下建立對應模組的 js 檔案。

  • 建立一個預設模板專案,基於 Vue3
  • 建立好專案之後,首先更改 main.js,匯入 pinia,註冊 pinia,匯出 pinia

Pinia

配置 Pinia

匯入 Pinia:

import * as Pinia from 'pinia';

註冊 Pinia:

app.use(Pinia.createPinia());

匯出 Pinia:

return {
    app,
    // 此處必須將 Pinia 返回
    Pinia,
}

使用 Pinia

首先在 stores 資料夾下,建立 counter.js,內容如下:

import {
	defineStore
} from 'pinia';

export const useCounterStore = defineStore('counter', {
	state: () => {
		return {
			count: 0
		};
	},
	// 也可以這樣定義
	// state: () => ({ count: 0 })
	actions: {
		increment() {
			this.count++;
		},
		decrement() {
			this.count--;
		},
	},
});

如上程式碼透過 defineStore 定義了一個名為 counter 的 store,然後透過 state 定義了一個 count 的狀態,然後透過 actions 定義了兩個方法,分別是 increment 和 decrement,分別用來增加和減少 count 的值。

再接著在首頁頁面,新增兩個按鈕分別是增加與減少呼叫 store 中的方法:

<template>
	<view>
		{{ count }}
		<button type="primary" @click="myIncrement">增加</button>
		<button type="primary" @click="myDecrement">減少</button>
	</view>
</template>

<script setup>
	import {
		useCounterStore
	} from '@/stores/counter.js'
	import {
		storeToRefs
	} from 'pinia'

	const counterStore = useCounterStore()

	const {
		count
	} = storeToRefs(counterStore)

	function myIncrement() {
		counterStore.increment()
	}

	function myDecrement() {
		counterStore.decrement()
	}
</script>

程式碼我寫完了,先來看執行的效果,然後我在一一解釋程式碼:

  • 如上程式碼的含義首先在 script setup 中匯入了 useCounterStore,然後透過 useCounterStore 建立了一個 counterStore
  • 然後透過 storeToRefs 將 counterStore 中的 count 轉換成了 ref,然後在模板中透過 {{ count }} 將 count 的值顯示出來
  • 然後透過 @click 呼叫 myIncrement 和 myDecrement 方法,然後在 myIncrement 和 myDecrement 方法中呼叫了 counterStore 中的 increment 和 decrement 方法
  • 然後透過 counterStore.increment() 和 counterStore.decrement() 呼叫了 store 中的方法

好,到這已經結束了,是不是很簡單,我就不多說了,大家可以自己去嘗試一下。

這個儲存的是全域性的資料,大家還可以新建一個 one 頁面,配置一下 tabBar 在 one 頁面中從 store 中獲取 count 的值, 顯示一下即可,在首頁操作之後 one 頁面的 count 的值也會發生變化。

End

  • 如果你有任何問題或建議,歡迎在下方留言,我會盡快回復
  • 如果你覺得本文對你有幫助,歡迎點贊、收藏,你的支援是我寫作的最大動力

相關文章