Does autocomplete/intellisense only work with TS?

[shainegordon]

Just trying to understand when and where autocomplete/intellisense would work in Pinia, or if this is a config issue on my side.

Using WebStorm and Nuxt

In a store:
no dog appearing in autocomplete

calling another action does work (as expected)

in a component:
unknown action fetchUser and state user

Is this a JS-only restriction, and the above would work correctly with TS?

All in all though, really like this library, excellent work 👍

[posva]

All in all though, really like this library, excellent work 👍

Thanks 😃

It should work with JS too but note your user is initialized to null. In the docs there is an example about typing even in JS with comments. I don't know about the problem with fetchUser(). Maybe having a jsconfig.json (like a tsconfig.json) helps the IDE and TS to make it work.

[ttkoma]

I have the same problem

[BenShelton]

See documentation for adding TS intellisense in WebStorm:

• https://www.jetbrains.com/help/webstorm/auto-completing-code.html#ws_completion_from_tw_language_service
• https://www.jetbrains.com/help/webstorm/typescript-support.html#ws_ts_use_ts_service_checkbox

Although I don't have this IDE to try, creating a jsconfig.json with "allowJs": true set should be enough. Example jsconfig.json:

{
  "include": [
    "./src/**/*"
  ],
  "compilerOptions": {
    "allowJs": true
  }
}

Make sure to restart the service after these changes:

Click the TypeScript widget on the Status bar and select Restart TypeScript Service from the list.

[mousesama]

I seem to be having a very similar issue where even going by the examples in docs, I can access my store properties, getters, and actions just fine in the script. I return the whole store from setup() to use in my templates, which works except WebStorm Intellisense does not detect any of my custom properties and functions. When I use the properties, getters, or actions in the template, they work as one would expect but WebStorm just can't seem to find them even though it sees the other built-in properties of the store (see pic). Adding allowJS to tsconfig.json as described above unfortunately does not help.

This is my simple test store:

export const useResources = defineStore('resources', {
    state: (): Resources => ({
        name: "name",
        money: 100
    }),
    getters: {
        getMoney(state) {
            return state.money
        }
    },
    actions: {
        addMoney() {
            this.money++
        },
        addMoreMoney(value: number) {
            this.money += value
        }
    }
})

which I then use in my Vue component like so:

<script lang="ts">
import { useResources } from "@/stores/resources";
import { defineComponent } from "vue";

export default defineComponent({
  name: "TheResources",
  setup() {
    const resourcesStore = useResources()

    return {
      resourcesStore,
      increment: resourcesStore.addMoney
    }
  }
})
</script>

[mousesama]

I managed to find the issue and a workaround for it, more details in this opened issue: #772

[joshkrz]

I had to do a couple of things to get autocompletion working. I'm using PHPStorm 2021.2.3 (WebStorm under the hood), it is also worth noting I'm not using Typescript in my projects.

• Move the id parameter in the Pinia store into the options object.
  • Defining store with id as first parameter instead of inside options breaks WebStorm Intellisense in Vue templates #774 (reply in thread)
• Export the defineStore function by default and import to components without destructuring.

Adding a jsconfig.json seemed to have no effect for me.

EDIT: Just realised that autocompletion inside of the store in actions and getters does not work, even with the jsconfig.json. I'll post back if I find a solution.

[Meller008]

Yes it worked for me. But I don't like the default export.

[zjssos]

maybe you can do it like
menus.js
export default defineStore({ id: 'menus', ... })
index.js
import menus from '@/store/modules/menus' export const menusStore = menus

[keyding]

This is OK.

[djpeach]

Looks to be the default import.

This fails

I created a store with the id param, some state and an action and exported it as a const:

I then import it and the type of the store loses the actions and state:

This succeeds

However, exporting it as the default export and then importing it keeps the state and actions in the type, and the resolution works:

Note

So looks like the answer for now is use a default export. If you want to have a name in the store file as well like I do, you can still name the const and export it as the default:

[taisha]

doesn't work with webstorm 2022.1

[m4heshd]

Unfortunately it only works with actions. Not with state or getters. (2022.1)

[linpan]

how fix it ?