Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to get plugins intellisense in store #340

Open
Pacheco95 opened this issue Jan 6, 2021 · 1 comment
Open

Unable to get plugins intellisense in store #340

Pacheco95 opened this issue Jan 6, 2021 · 1 comment

Comments

@Pacheco95
Copy link

I'm trying to access my axios plugin from the store but the intellisense is not showing the plugin instances. It worked for my vue components. I followed these articles
https://axios.nuxtjs.org/extend
https://blog.lichter.io/posts/nuxt-api-call-organization-and-decoupling/

// ~/plugins/repository
import { Plugin } from '@nuxt/types'

import api, { EvaApi } from '@/api/repository'

declare module 'vue/types/vue' {
  // this.$evaApi inside Vue components
  interface Vue {
    $evaApi: EvaApi
  }
}

declare module '@nuxt/types' {
  // nuxtContext.app.$evaApi inside asyncData, fetch, plugins, middleware, nuxtServerInit
  interface NuxtAppOptions {
    $evaApi: EvaApi
  }
  // nuxtContext.$evaApi
  interface Context {
    $evaApi: EvaApi
  }
}

declare module 'vuex/types/index' {
  // this.$evaApi inside Vuex stores
  interface Store<S> {
    $evaApi: EvaApi
  }
}

const evaApiPlugin: Plugin = (context, inject) => {
  inject('evaApi', api(context.$axios))
}

export default evaApiPlugin
// ~/api/repository
import { NuxtAxiosInstance } from '@nuxtjs/axios'

export interface EvaApi {
  signin: (email: string, password: string) => void
}

export default ($axios: NuxtAxiosInstance): EvaApi => ({
  signin(email: string, password: string) {
    return $axios.$post('/auth/login', { email, password })
  },
})
// ~/store/signin
export default class SignIn extends VuexModule implements SignInFormFields {
  email = ''
  password = ''
  loading = false

  @Mutation
  public setEmail(email: string) {
    this.email = email
  }

  @Mutation
  public setPassword(password: string) {
    this.password = password
  }

  @Mutation
  public setLoading(loading: boolean) {
    this.loading = loading
  }

  @Action
  async signIn() {
    this.setLoading(true)
    console.log('action', this)
    await sleep(2000)
    this.setLoading(false)
  }
}

image

The $evaApi plugin is successfuly injected as you can see, but no intellisense.
I could not find any guide to declare types in the docs. How can I get te correct typings and intellisense?

@Just-Hussain
Copy link

using a shim might help ? I managed to get intellisense for plugins in the store using the following shim:

// veux-shim.d.ts

import { Store } from 'vuex';

declare module 'vuex-module-decorators/dist/types' {
	interface VuexModule {
		store: Store<any>;
	}
}

I've noticed that u've got ur declares in the plugin, maybe moving it here can help.

I don't really get it ngl, but u might be able to play around with it and get it to work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants