vue3.0之全局变量app.config.globalProperties的使用
globalProperties
- 类型:[key: string]: any
- 默认:undefined
使用方法
添加一个可以在应用的任何组件实例中访问的全局 property。组件的 property 在命名冲突具有优先权。
这可以代替 Vue 2.x Vue.prototype 扩展:
// 之前(Vue 2.x)
Vue.prototype.$http = () => {}
// 之后(Vue 3.x)
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}
1
2
3
4
5
6
2
3
4
5
6
当我们想在组件内调用http时需要使用getCurrentInstance()来获取。
import { getCurrentInstance, onMounted } from "vue";
export default {
setup( ) {
const { ctx } = getCurrentInstance(); //获取上下文实例,ctx=vue2的this
onMounted(() => {
console.log(ctx, "ctx");
ctx.http();
});
},
};
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
getCurrentInstance代表上下文,即当前实例。ctx相当于Vue2的this, 但是需要特别注意的是ctx代替this只适用于开发阶段,如果将项目打包放到生产服务器上运行,就会出错,ctx无法获取路由和全局挂载对象的。此问题的解决方案就是使用proxy替代ctx,代码参考如下。
import { getCurrentInstance } from 'vue'
export default ({
name: '',
setup(){
const { proxy } = getCurrentInstance() // 使用proxy代替ctx,因为ctx只在开发环境有效
onMounted(() => {
console.log(proxy, "proxy");
proxy.http();
});
}
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
或者
<script>
import { getCurrentInstance } from 'vue'
export default {
components: {},
setup() {
const instance = getCurrentInstance()
console.log(instance.appContext.config.globalProperties)
return {}
},
}
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
注意
注意:尤大在vue3推荐使用依赖注入:provide和inject。原因:vue/rfcs.
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13