vue3 setup语法糖各种语法新特性的使用方法(vue3+vite+pinia)

 更新时间:2022年09月27日 10:22:24   作者:wuchus  
这篇文章主要介绍了vue3 setup语法糖各种语法新特性的使用(vue3+vite+pinia),本文主要是记录vue3的setup语法糖的各种新语法的使用方法,需要的朋友可以参考下

一、背景

最近工作了比较忙,比较少写文章;最近做的开源项目,由于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语法糖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue2.0+elementui实现一个上门取件时间组件

    vue2.0+elementui实现一个上门取件时间组件

    这篇文章主要给大家介绍了关于vue2.0+elementui实现一个上门取件时间组件的相关资料,用于预约上门服务时间 看到网上有很多乱七八糟的代码,看着头疼,于是自己写了一个简单的,需要的朋友可以参考下
    2024-02-02
  • VUE表格显示错位的两种解决思路分享

    VUE表格显示错位的两种解决思路分享

    这篇文章主要介绍了VUE表格显示错位的两种解决思路,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue折叠面板组件的封装

    Vue折叠面板组件的封装

    这篇文章主要为大家详细介绍了Vue折叠面板组件的封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue中添加与删除关键字搜索功能

    vue中添加与删除关键字搜索功能

    这篇文章主要介绍了vue中添加与删除,关键字搜索功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • Vue 报错-4058 ENOENT:no such file or directory的原因及解决方法

    Vue 报错-4058 ENOENT:no such file or directory的原因及解决方法

    Vue 报错-4058 ENOENT: no such file or directory的原因和解决办法,关于为什么为会报这个错误,按照字面意思的理解就是没有找到这个文件或这个路径,说明是路径不对,本文给大家分享解决方案,感兴趣的朋友一起看看吧
    2023-10-10
  • Vue中状态管理器(vuex)详解以及实际应用场景

    Vue中状态管理器(vuex)详解以及实际应用场景

    Vuex是一个专为Vue.js应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于Vue中状态管理器(vuex)详解以及实际应用场景的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • Vue3中事件总线的具体使用

    Vue3中事件总线的具体使用

    本文主要介绍了Vue3中事件总线的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue学习笔记之给组件绑定原生事件操作示例

    vue学习笔记之给组件绑定原生事件操作示例

    这篇文章主要介绍了vue学习笔记之给组件绑定原生事件操作,结合实例形式详细分析了vue.js组件绑定原生事件相关原理、实现方法与操作注意事项,需要的朋友可以参考下
    2020-02-02
  • vue自定义filters过滤器

    vue自定义filters过滤器

    这篇文章主要介绍了vue自定义filters过滤器的相关知识,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-04-04
  • Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器

    Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器

    本篇文章主要介绍了Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04

最新评论