Vue 3使用Typescript注入
我使用了新的Vue 3 Composition API,并为反应数据编写了一个“存储”Vue 3使用Typescript注入,typescript,vue.js,vuejs3,Typescript,Vue.js,Vuejs3,我使用了新的Vue 3 Composition API,并为反应数据编写了一个“存储” const state = reactive<State>({ accessToken: undefined, user: undefined, }); export default { state: readonly(state), } 最后,在一个组件/视图中,我注入存储以利用它 export default defineComponent({ name: "Ho
const state = reactive<State>({
accessToken: undefined,
user: undefined,
});
export default {
state: readonly(state),
}
最后,在一个组件/视图中,我注入存储以利用它
export default defineComponent({
name: "Home",
inject: ["store"],
components: {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar,
IonButton,
},
computed: {
email() {
return this.store.state.user.email;
},
},
});
</script>
导出默认定义组件({
姓名:“家”,
注入:[“存储”],
组成部分:{
爱雍容,
IonHeader,
伊恩佩奇,
IonTitle,
IonToolbar,
IonButton,
},
计算:{
电子邮件(){
返回此.store.state.user.email;
},
},
});
不幸的是,Typescript不喜欢我使用this的方式。请将存储在computed属性email()
说
类型“ComponentPublicInstance”上不存在属性“store”
我的意思是,当我删除
标记中的lang=“ts”
时,一切正常,但不会显示错误。
关于如何解决这个问题或它的具体含义有什么建议吗
提前谢谢 我建议将存储用作全局属性,而不在任何子组件中指定inject
,因为提供/注入可能有一些警告:
然后直接使用它:
export default defineComponent({
name: "Home",
components: {
...
},
computed: {
email() {
return this.store.state.user.email;
},
},
});
</script>
导出默认定义组件({
姓名:“家”,
组成部分:{
...
},
计算:{
电子邮件(){
返回此.store.state.user.email;
},
},
});
const app = createApp(App)
.use(IonicVue)
.use(router);
app.config.globalProperties.store= store;
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
store:any // replace it with the right type
}
}
export default defineComponent({
name: "Home",
components: {
...
},
computed: {
email() {
return this.store.state.user.email;
},
},
});
</script>