当我们开发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>