Vue3 FAQ summary
Introduction: vue3 beta has been out for a while, and recently I just had time to practice hands. The problems encountered in the process are summarized as follows
This article github source address
Below is the problem
How to register global components in vue3
import {
createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 注册全局组件
import SaveButton from '@/globalComponents/SaveButton'
app.component('SaveButton', SaveButton)
app.mount('#app')
How to register global custom directives in vue3
import {
createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 注册全局自定义指令 `v-focus`
app.directive('focus', {
inserted: function (el) {
el.focus()
},
})
app.mount('#app')
How to mix in vue3 globally
import {
createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 全局混入
app.mixin({
beforeCreate() {
console.log('我是全局mixin')
},
})
app.mount('#app')
How to mount global properties and methods globally in vue3
import {
createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
const app = createApp(App)
// 全局ctx(this) 上挂载 $axios
app.config.globalProperties.$axios = axios
app.mount('#app')
How to register plugins for vue3
import {
createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 注册插件
class plugin {
static install(_vue) {
// 混入
_vue.mixin({
beforeCreate() {
console.log('我是plugin')
},
})
}
}
app.use(plugin)
app.mount('#app')
Vue3 global registration filter filter
Haha, it looks like vue 3 has abandoned the filter and cannot be registered temporarily
How to get the $router and $route of vue-router in the vue3 setup function
The following two methods are feasible (pass getCurrentInstanceor useRoute, useRouter).
import {
getCurrentInstance, unref } from 'vue'
import {
useRoute, useRouter } from 'vue-router'
export default {
export default {
setup() {
// 拿到当前组件 this(ctx)
const {
ctx } = getCurrentInstance()
// 拿到 $router
// const $router = useRouter()
const $router = ctx.$router
// 拿到 $route
// const $route = useRoute()
const $route = unref(ctx.$router.currentRoute)
}
}
How to get vuex's $store in the vue3 setup function
The following two methods are feasible (pass getCurrentInstanceor useStore).
import {
getCurrentInstance, onMounted } from 'vue'
import {
useStore } from 'vuex'
export default {
setup() {
// 拿到当前组件 this(ctx)
const {
ctx } = getCurrentInstance()
// console.log(ctx.$store)
// 在这里这样是拿不到的，因为$store在beforeCreate生命周期里注入，而setup函数在beforeCreate之前执行
// 此链接的文章里有介绍 https://blog.csdn.net/qq_39953537/article/details/105703894
// const $store = useStore()
onMounted(() => {
console.log(ctx.$store)
})
},
}
Reference link