uniapp项目中使用vue3开发多端项目实践-阿里云开发者社区

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

2024-03-19 119

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

本项目中使用vue3开发多端项目实践，hbuilderx内置vue3模块，使用了vite4.x构建，编译构建项目的速度比火箭还快，超爽！！！！

1、使用版本说明

HBuilderX: 3.8.4
Vite: 4.2.1
uView-Plus: 3.1.31

2、创建项目

通过hbuilderx可视化编辑器创建项目

点击编辑器的文件 > 新建 > 项目（快捷键Ctrl+N）

选择uni-app项目，输入项目名/路径，选择项目模板，勾选vue3版本，点击创建，即可成功创建

3、运行项目

点击编辑器的运行 > 运行到浏览器 > 选择浏览器

当然也可以运行到手机或模拟器、运行到小程序工具。

App.vue使用setup语法糖编码。

<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>

uniapp内置了pinia状态管理。

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
    }
}

4、uniapp+pinia本地缓存插件PiniaPluginUnistorage

pinia-plugin-unistorage 基于uniapp pinia实现多端的更简单的全局本地数据缓存

该插件是 pinia-plugin-persistedstate 的 uniapp 版本。

npm安装插件

npm i pinia-plugin-unistorage -D

在main.ts中引入

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 的数据读写都将持久化
})

支持vue3 setup 语法

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