在setup語法糖中調用uniapp的頁面生命周期
<script setup>import { onShow } from "@dcloudio/uni-app"onShow(() => {//hanlder...})
</script>
vue2混入在vue3中建議使用組合式API
新建baseHook.js
import { ref } from "vue";
export function useBaseHook() {//響應式引入界面之后值變化 頁面數據也會發生改變const userList = ref([])async function getUserList() {let requestRes = await request({//....})userList.value = requestRes.rows}return {userList,getUserList}
}
頁面上使用
<script setup>import {useBaseHook} from '../utils/baseHook.js'let {userList,getUserList} = useBaseHook()
</script>
狀態管理Pinia
uniapp教程官網Pinia用法
HBuilder X 已內置了 Pinia，無需手動安裝，按照下方示例使用即可。
main.js添加
import App from './App'
import { createSSRApp } from 'vue';
import * as Pinia from 'pinia';export function createApp() {const app = createSSRApp(App);app.use(Pinia.createPinia());return {app,Pinia, // 此處必須將 Pinia 返回};
}
創建一個 Store
// stores/counter.js
import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {const count = ref(0);function increment() {count.value++;}return { count, increment };
});
頁面使用
<script setup>import { useCounterStore } from '@/stores/counter'const counter = useCounterStore()counter.count++counter.$patch({ count: counter.count + 1 })// 或使用 action 代替counter.increment()
</script>
<template><!-- 直接從 store 中訪問 state --><div>Current Count: {{ counter.count }}</div>
</template>頁面跳轉、傳值在setup語法糖中（vue3）
跳轉頁
uni.navigateTo({url: "/pages/.../...",success: (e) => {e.eventChannel.emit('infoKey', 任意參數)}
})
接收頁面
import { onShow,onLoad } from "@dcloudio/uni-app"
import { getCurrentInstance } from "vue";
const instance = getCurrentInstance().proxy
onLoad(() => {//或者onShow(() => {//在vue2語法中直接this.getOpenerEventChannel()，就能拿到eventChannel //但是在vue3中好像沒this的概念 用 getCurrentInstance().proxy代替了const eventChannel = instance.getOpenerEventChannel();eventChannel.on('infoKey', function(data) {console.log('infoKey', data)})
})
)
