Utilizing Typescript with Vue 3's Injection Feature

Question

Utilizing Typescript with Vue 3's Injection Feature

Using the new Vue 3 Composition API, I have created a "store" for reactive data.

const state = reactive<State>({
  accessToken: undefined,
  user: undefined,
});

export default {
  state: readonly(state),
}

When my app is created, I pass the store to all components:

const app = createApp(App)
  .provide("store", store)
  .use(IonicVue)
  .use(router);

Finally, in a component/view, I inject the store to utilize it.

export default defineComponent({
  name: "Home",
  inject: ["store"],
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
    IonButton,
  },
  computed: {
    email() {
      return this.store.state.user.email;
    },
  },
});

However, when using TypeScript, I encounter an issue with this.store in the computed property email(). The error message states:

Property 'store' does not exist on type 'ComponentPublicInstance<{}, {}, {}, { email(): any; }, {}, EmitsOptions, {}, {}, false, ComponentOptionsBase<{}, {}, {}, { email(): any; }, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, {}>>'

Everything works fine when removing the lang="ts" attribute from the <script/> tag, but the error persists. Any suggestions on how to resolve this or what it means?

Thank you in advance!

typescript vue.js vuejs3 vue-composition-api

Answer 1

Answer №1

One suggestion is to set the store as a global property without explicitly injecting it into any child components, as using provide/inject may come with some reactivity challenges:

const app = createApp(App)
  .use(IonicVue)
  .use(router);
app.config.globalProperties.store= store;

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties  {
       store:any // update type accordingly
     }
   }

Then utilize it directly within your component:

export default defineComponent({
  name: "Home",
  components: {
  ...
  },
  computed: {
    email() {
      return this.store.state.user.email;
    },
  },
});
</script>

Answer 2

One suggestion is to set the store as a global property without explicitly injecting it into any child components, as using provide/inject may come with some reactivity challenges:

const app = createApp(App)
  .use(IonicVue)
  .use(router);
app.config.globalProperties.store= store;

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties  {
       store:any // update type accordingly
     }
   }

Then utilize it directly within your component:

export default defineComponent({
  name: "Home",
  components: {
  ...
  },
  computed: {
    email() {
      return this.store.state.user.email;
    },
  },
});
</script>

Answer 3

Answer №2

For those grappling with a similar issue in Vue 3 + TS, I have discovered a workaround that does not require altering the app.config or declaring a new module:

Setting up App.ts

import { createApp, reactive } from 'vue'
import App from './App.vue'

const Store = reactive({
  myProperty: 'my value'
})

createApp(App)
  .provide('Store', Store)
  .mount('#app')

The component accessing the injected reactive object:

<template>
  <div>{{ Store.myProperty }}</div>
</template>

<script lang="ts">
import { IStore } from '@/types'
import { defineComponent, inject } from 'vue'

export default defineComponent({
  name: 'MyComponentName',
  setup() {
    return {
      Store: inject('Store') as IStore,
    }
  },
  created() {
    console.log(this.Store) // will show the `Store` in the console
  }
})
</script>

The type defition for the Store (@/types.ts):

export interface IStore {
  myProperty: string
}

By following these 3 steps, I successfully accessed and modified Store.myProperty using TypeScript without any issues.

Answer 4

For those grappling with a similar issue in Vue 3 + TS, I have discovered a workaround that does not require altering the app.config or declaring a new module:

Setting up App.ts

import { createApp, reactive } from 'vue'
import App from './App.vue'

const Store = reactive({
  myProperty: 'my value'
})

createApp(App)
  .provide('Store', Store)
  .mount('#app')

The component accessing the injected reactive object:

<template>
  <div>{{ Store.myProperty }}</div>
</template>

<script lang="ts">
import { IStore } from '@/types'
import { defineComponent, inject } from 'vue'

export default defineComponent({
  name: 'MyComponentName',
  setup() {
    return {
      Store: inject('Store') as IStore,
    }
  },
  created() {
    console.log(this.Store) // will show the `Store` in the console
  }
})
</script>

The type defition for the Store (@/types.ts):

export interface IStore {
  myProperty: string
}

By following these 3 steps, I successfully accessed and modified Store.myProperty using TypeScript without any issues.

Utilizing Typescript with Vue 3's Injection Feature

Answer №1

Answer №2

Similar questions

How can I access the parameter value for the tooltip callback function within echarts?

What is the best way to select an HTML tag element using the :v-deep() selector?

WebStorm fails to identify Vue Material Components' HTML tags

Exploring ways to utilize array.find by comparing it to a different object

Include an item in a Vuetify model's array of objects

At what point in the VueJS lifecycle do props get updated?

What is the best way to save a Map for future use in different components?

How to properly log out a user in Vue.js?

Tricking Vuejs into triggering a @change event

Troubleshooting Laravel API Eloquent Where Clause inconsistencies when integrated with Vue

Angular: Troubleshooting blank pages in HTML - What's causing it?

How can I test for equality with an array item using v-if in Vue.js?

What is the best way to pass down SectionList prop types in TypeScript when using React?

What could be causing my Vue.js application to not function properly when utilizing the Vue runtime version?

Vuetify's autofocus feature is limited to functioning only when the modal is first opened

Difficulty in transferring a variable from my JavaScript file to my PHP file

Ways to position loading animation in the center and create a lightbox effect for the rest of the page

What causes TypeScript 3.7.5 to trigger an error while typing a function that accepts an array as a parameter?

Using Angular NgRx - triggering an action from an effect once certain actions yield a result

Inject the data within Observable<Object> into Observable<Array>