一、背景

最近工作了比较忙,比较少写文章;最近做的开源项目,由于vue-clivuex要逐渐不维护了,因此需要对技术栈进行升级;目前所使用的最新技术栈是:vue3 vite element-plus axios pinia mitt echarts

其中:

  • vitevue团队最新推出的脚手架,相比vue-cli来说速度更快,依赖更少;
  • element-plus则是适配于vue3viteUI框架;
  • piniavuex的替代版本,它取消了mutations,语法上比原来的vuex更加简洁;
  • mitt主要用来做EventBus的功能,因为vue3取消了this指针,所以很多插件都是需要手动导入的,下文会介绍。

本文主要记录在代码重构过程中对vue3新语法特性的学习使用,并且使用的是setup语法糖的语法特性。

二、vue3语法的使用

2.1. 父子通信props

子组件:

<script setup>
// 父传子
defineProps({
	value: {
		type: Number,
		default: 1
	}
})
// 子传父
const emit = defineEmits(['change', 'setValue'])
// 模板绑定的监听函数
function changeValue(val) {
	emit('change', val)
}
function changeSet(val) {
	emit('setValue', val)
}
</script>

父组件:

// 父组件的使用方法和vue2相同
<child :value="value" @change="change" @setValue="setValue"></child>

2.2. EventBus

注意:需要自行安装mitt

npm i mitt

mian.js文件

// main.js
import mitt from 'mitt'
app.config.globalProperties.mittBus = new mitt()

组件中使用

<script setup>
import { getCurrentInstance } from "@vue/runtime-core"
const $bus = getCurrentInstance().appContext.config.globalProperties.$bus

$bus.$emit('change', value)
$bus.$on('change', (val) => {
	console.log(val)
})
</script>

2.3. 计算属性computed

由于vue3中没有this指针,因此使用计算属性需要自己自行导入

<script setup>
import { computed } from '@vue/runtime-core'

const value = computed(() => {
	return 1   1
})
</script>

2.4. pinia状态管理器的使用

2.4.1. 模块化

在安装pinia后,在目录stores下新建index.js文件,作为模块化的入口文件。
index.js文件

// 引入模块文件
import aside from './aside'
import header from './header'
import menuState from './menuState'
import tags from './tags'

export default function stores() {
    return {
        aside: aside(),
        header: header(),
        menuState: menuState(),
        tags: tags()
    }
}

在同目录下新建模块文件,如menuState文件:

// menuState
import { defineStore } from "pinia"

export default defineStore('menuState', {
    state() {
        return {
            showRightMenu: false,
            left: 0,
            top: 0,
            rightMenuList: []
        }
    },
    actions: {
        changeShowRightMenu(val) {
            this.showRightMenu = val
        },
        changeLeft(val) {
            this.left = val
        },
        changeTop(val) {
            this.top = val
        },
        changeRightMenuList(val) {
            this.rightMenuList = val
        }
    }
})

2.4.2. 使用方法

pinia的使用方法比较简便,在组件中导入后,模块可以直接引用,也可以使用计算属性使用;同时,actions中的方法也可以直接调用,无需使用以往的mapState等方式。如下所示:

<script setup>
import stores from '@/stores/index'
import { computed } from '@vue/runtime-core'

// 解构出menuState
const { menuState } from stores()

// 使用计算属性获取status
const showRightMenu = computed(() => {
	return menuState.showRightMenu
})

// 调用方法,可直接调用
menuState.changeLeft(12)
</script>

<template>
	<!-- 也可以直接在模板中使用 -->
	<div>
	{{menuState.top}}
	</div>
</template>

2.5. watch监听器

watch监听器的使用比较简单,并不需要导入,直接使用即可。

<script setup>
// dataSources是被监听的变量
watch(() => dataSources, () => {
	console.log(dataSources)
})
</script>

2.6. 全局函数/变量注册

细心的读者可能发现了,mitt就是一个全局注册的一个函数;同理,我们在定义一些全局函数或者变量时,也是使用这种方法。

// main.js
// 注册element-plus的一个消息提示
import { ElMessage } from 'element-plus'
app.config.globalProperties.$message.success = () => {
    ElMessage({
        message: "OK",
        type: 'success'
    })
}

组件中使用:

<script setup>
import { getCurrentInstance } from "@vue/runtime-core";
const $message.success = getCurrentInstance().appContext.config.globalProperties.$message.success
$message.success()
</script>

三、总结

本文主要是记录vue3setup语法糖的各种新语法的使用方法,之后有空再写篇不使用setup语法糖的语法使用。

到此这篇关于vue3 setup语法糖各种语法新特性的使用(vue3 vite pinia)的文章就介绍到这了,更多相关vue3 setup语法糖内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

vue3 setup语法糖各种语法新特性的使用方法(vue3+vite+pinia)的更多相关文章

  1. 模式匹配第三弹: 自定义的模式匹配和语法糖

    作者:OlivierHalligon,原文链接,原文日期:2015-04-24译者:walkingway;校对:小锅;定稿:numbbbbb在模式匹配系列文章的第一弹和第二弹中,我们已经看到关于switch搭配很多类型的用法,包括元组,范围,字符串,符号和一些其他类型。让你的自定义类型响应模式匹配我们构造一个自定义的结构体:最终打印的结果是3x+2!值得注意的一点是:在使用自定义类型时,Swift不知道switch是否穷尽了所有可能。更好的方式是在switch中直接传入aBook.year。

  2. swift学习日志—— if let 与 guard 语法糖

    话说iflet和guard只是语法糖,没有也可以,但有了可以使得代码更简洁方便。------------------------------------ifletSwift中因为有optional,经常需要判断是否为空。假如没有iflet,大致写成上面的样子,有了iflet,可以改写成上面两段代码的控制流是一样的。对照着,可以看出iflet的写法更加简洁方便。------------------------------------至于iflet和guard语法中出现的where,只是附加一些条件。sql中

  3. vue3获取当前路由地址

    本文详细讲解了vue3获取当前路由地址的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  4. 十分钟带你快速上手Vue3过渡动画

    在开发中我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验,下面这篇文章主要给大家介绍了关于如何快速上手Vue3过渡动画的相关资料,需要的朋友可以参考下

  5. 用vue3封装一个符合思维且简单实用的弹出层

    最近新项目中需要一个弹窗组件,所以我就做了一个,下面这篇文章主要给大家介绍了关于如何利用vue3封装一个符合思维且简单实用的弹出层,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

  6. 使用Vite+Vue3+Vant全家桶快速构建项目步骤详解

    这篇文章主要为大家介绍了使用Vite+Vue3+Vant全家桶快速构建项目步骤详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  7. vue3中$attrs的变化与inheritAttrs的使用详解

    $attrs现在包括class和style属性。 也就是说在vue3中$listeners不存在了,vue2中$listeners是单独存在的,在vue3 $attrs包括class和style属性, vue2中 $attrs 不包含class和style属性,这篇文章主要介绍了vue3中$attrs的变化与inheritAttrs的使用 ,需要的朋友可以参考下

  8. Vue3.2 setup语法糖及Hook函数基本使用

    这篇文章主要为大家介绍了Vue3.2 setup语法糖及Hook函数基本使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  9. vue3中proxy的基本用法说明

    这篇文章主要介绍了vue3中proxy的基本用法说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  10. 如何利用vue3实现一个俄罗斯方块

    俄罗斯方块这个游戏相信大家都玩过,下面这篇文章主要给大家介绍了关于如何利用vue3实现一个俄罗斯方块的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部