Search code examples
javascripttypescriptvue.jsimportpinia

Typing the Store when imported to typescript pinia vue

How can I type the Store when imported to typescript pinia vue. Do I need to type it at all?

    // Component

    <p>{{ storeForm.firstName }}</p>  // getting an error "Property 'storeForm' does not exist on type"


    // Store

    import { defineStore } from 'pinia'

export const useForm = defineStore('login',{
  state: () => ({
    firstName: <string>'',
    lastName: <string>''
  }),
  getters: {
  },
  actions: {
    login(data: any) {
      this.firstName = data.firstName
      this.lastName = data.lastName
    }
  }
})

Solution

  • You just need to use the defineComponent() wrapper around your component object to have Typescript types:

    // Will correctly type your component data, methods etc.
export default defineComponent({
  setup() {}
})