本文的由來呢,就是因為在 Vue2 中與 Vue3 中都可以使用 Vuex 來進行資料的儲存, 但是在 Vue3 出現了 Pinia,所以我就想著在 uni-app 中使用 Pinia 來進行資料的儲存。
首先來給大家看看官方檔案吧,在檔案中找到, uni-app
-> 教學
-> vue語法
,先來看 Vue2:
可以從圖中看到,在 Vue2 當中的儲存方式只有 Vuex,然後再來看看 Vue3:
多了一個 Pinia,好,知道了這些內容之後我就來開始寫程式碼編寫範例,帶大家過一遍。
根據官方檔案的介紹,首先我們需要搭建一個對應的目錄結構:
├── pages
├── static
└── stores
└── counter.js
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss
就是建立一個 stores 資料夾,在該資料夾下建立對應模組的 js 檔案。
匯入 Pinia:
import * as Pinia from 'pinia';
註冊 Pinia:
app.use(Pinia.createPinia());
匯出 Pinia:
return {
app,
// 此處必須將 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>
程式碼我寫完了,先來看執行的效果,然後我在一一解釋程式碼:
好,到這已經結束了,是不是很簡單,我就不多說了,大家可以自己去嘗試一下。
這個儲存的是全域性的資料,大家還可以新建一個 one 頁面,設定一下 tabBar 在 one 頁面中從 store 中獲取 count 的值, 顯示一下即可,在首頁操作之後 one 頁面的 count 的值也會發生變化。