uniapp项目中使用vue3开发多端项目实践

HBuilderX: 3.8.4
Vite: 4.2.1
uView-Plus: 3.1.31

<script setup>
    import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
    onLaunch(() => {
        console.log('App Launch!')
    })
    onShow(() => {
        console.log('App Show!')
    })
    onHide(() => {
        console.log('App Hide!')
    })
</script>

import App from './App'
import uView from '@/uview-plus'
import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'
export function createApp() {
    const app = createSSRApp(App)
    const pinia = createPinia()
    app.use(pinia)
    app.use(uView)
    return {
        app,
        pinia
    }
}

npm i pinia-plugin-unistorage -D

import { createSSRApp } from 'vue'
import * as Pinia from 'pinia'
import { createUnistorage } from 'pinia-plugin-unistorage'
export function createApp() {
    const app = createSSRApp(App)
    const store = Pinia.createPinia()
    // 关键代码
    store.use(createUnistorage())
    app.use(store)
    return {
        app,
        Pinia // 此处必须将 Pinia 返回
    }
}

import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
    state() {
        return {
            someState: 'hello pinia'
        }
    },
    unistorage: true // 开启后对 state 的数据读写都将持久化
})

import { defineStore } from 'pinia'
export const useStore = defineStore(
    'main',
    () => {
        const someState = ref('hello pinia')
        return { someState }
    },
    {
        unistorage: true // 开启后对 state 的数据读写都将持久化
    }
)