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

BNTang發表於2023-12-19
APP

前言

  • 經過上個章節的介紹，大家可以瞭解到 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

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

相關文章