vue3项目简化Compositions API使用-省去频繁的import和各use函数调用

当我们开发vue3项目，经常会使用proxy,router,store等等，避免代码的冗余，整理成一个共用文件，引入使用即可。
自行创建文件名为：compositions，里面放名为common.js的文件如下

import { computed, getCurrentInstance, ref, onBeforeUnmount } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';// 常用于setup中获取proxy,router,store等，省去频繁的import和各use函数调用
export function useCommon() {const $this = getCurrentInstance();const store = useStore();const router = useRouter();const route = useRoute();return {$this,proxy: $this.proxy,router,route,store,};
}

使用方式：

<script setup>import { useCommon } from '@/compositions/common.js';const { proxy, router, route, store } = useCommon();......
</script>

vue3项目简化Compositions API使用-省去频繁的import和各use函数调用相关推荐

vue-cli 将被 create-vue 替代？初始化基于 vite 的 vue3 项目为何如此简单？
大家好,我是若川.最近组织了源码共读活动<1个月,200+人,一起读了4周源码>,已经有超50+人提交了笔记,群里已经有超1500人,感兴趣的可以点此链接扫码加我微信 ruochuan12 ...
Vue3+Vant+Vue-cli+Restful api实战—图书商城移动端
Vue3+Vant+Vue-cli+Restful api实战-图书商城移动端经过将近一个月的努力,项目终于做完了,编写的时候在代码中写了很多注释,方便自己后期查看,有问题的小伙伴可以找我帮忙解决! ...
Vue3项目搭建全过程
目录一.前言二.搭建准备三.搭建项目四.启动项目一.前言在2020年的9月19日,万众期待的Vue3终于发布了正式版,命名为"One Piece". 它也带来了很多新的 ...
vue3项目目录结构
一.vue3项目的目录结构详解 node_modules:通过 npm install 下载安装的项目依赖包 public:存放静态资源公共资源,不会被压缩合并 -3DModel:存放.glb3D模型 ...
搭建一个简单的vue3项目
vue3项目的创建环境准备 nodejs vscode 在正式开发之前,我推荐使用 VS Code 的官方扩展插件 Volar,这个插件给 Vue 3 提供了全面的开发支持.我们可以在vscode里 ...
【Parcel 2 + Vue 3】从0到1搭建一款极快，零配置的Vue3项目构建工具
前言一周时间,没见了,大家有没有想我啊!哈哈!我知道肯定会有的.言归正传,我们切入正题.上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目.那么,今天我将会带领大家认识一个新的 ...
【Vue】新建一个Vue3项目
目录 1.新建vue项目 2.路径更改至新建的vue项目处 3.安装cnpm 4.cnpm安装vant3 5.安装babel-plugin 6.安装vue路由 7.安装axios 其他注意事项仅用于 ...
基于 abp vNext 和 .NET Core 开发博客项目 - 统一规范API，包装返回模型
基于 abp vNext 和 .NET Core 开发博客项目 - 统一规范API,包装返回模型转载于:https://github.com/Meowv/Blog 在实际开发过程中,每个公司可能不尽 ...
vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
Vite --- 创建Vue3项目
Vite 需要 Node.js 版本 >= 12.0.0. 1. node -v 查看node当前版本号 2. npm方式创建Vue3项目 npm init @vitejs/app 输入项目名 ...

vue3项目简化Compositions API使用-省去频繁的import和各use函数调用

vue3项目简化Compositions API使用-省去频繁的import和各use函数调用相关推荐

最新文章

热门文章