Usage in Vue2 with TypeScript

[Radiergummi]

Hey there! I'm working on migrating our (pretty big) Nuxt/TS/Vuex application to a Vue2/TS/Vite/Pinia stack. As we're locked in to Vuetify, I can't migrate to Vue3 yet (which is a shame, but... ¯\_(ツ)_/¯).

As we're inevitably going to migrate to Vue3 later on, I don't want to make this harder than it has to be and opted out of class-style components; we're basically just using standard Vue2 SFC components.

After following the getting started documentation on state usage, I noticed none of the provided examples actually work completely: Either Vue complains, or TypeScript complains, or my IDE isn't able to provide completion.

What I've tried, given the following test store:

import { defineStore } from 'pinia';

export const useCounterStore = defineStore( 'counter', {
  state: () => {
      return {
          counter: 25,
      };
  },

  actions: {
      increment(): void {
          this.counter++;
      },
  },
} );

Using a setup hook

<template>
  <v-btn type="button" @click="increment">{{ counter }}</v-btn>
</template>
<script lang="ts">
import Vue from 'vue';
import { useCounterStore } from '../store/stores/counter';

export default Vue.extends({
  setup() {
    const { counter, increment } = useCounterStore();

    return {
      counter, 
      increment,
    };
  },
});
</script>

• ☑️ Completions: Working, with types
• ☑️ Typescript: Doesn't complain
• ⚠️ Increment action: Does not work

Setting the store in the setup hook and accessing that

<template>
  <v-btn type="button" @click="increment">{{ counter }}</v-btn>
</template>
<script lang="ts">
import Vue from 'vue';
import { useCounterStore } from '../store/stores/counter';

export default Vue.extends({
  setup() {
    const store = useCounterStore();

    return {
      store,
    };
  },

  computed: {
    counter(): number {
      return this.store.counter;
    },
  },

  methods: {
    increment(): void {
      this.store.increment();
    },
  },
} );
</script>

• ☑️ Completions: Working, although manually provided
• ⚠️ Typescript: Doesn't accept this.store:

  TS2339: Property 'store' does not exist on type 'CombinedVueInstance { msg: string; }>>'.
  

• ☑️ Increment action: Working

Using mapState and mapActions

<template>
  <v-btn type="button" @click="increment">{{ counter }}</v-btn>
</template>
<script lang="ts">
import Vue from 'vue';
import { mapActions, mapState } from 'pinia';
import { useCounterStore } from '../store/stores/counter';

export default Vue.extends({
  computed: {
    ...mapState(useCounterStore, ['counter']),
  },

  methods: {
    ...mapActions(useCounterStore, ['increment']),
  },
} );
</script>

This is accepted by TypeScript, the increment action works, but the IDE is unable to complete the property and the action and reports them as undefined.

• ⚠️ Completions: The IDE is unable to provide completions for properties or actions and reports them as undefined.
• ☑️ Typescript: Doesn't complain
• ☑️ Increment action: Working

Calling the store in computed or methods individually

<template>
  <v-btn type="button" @click="increment">{{ counter }}</v-btn>
</template>
<script lang="ts">
import Vue from 'vue';
import { useCounterStore } from '../store/stores/counter';

export default Vue.extends({
  computed: {
    counter(): number {
        return useCounterStore().counter;
    },
  },

  methods: {
    increment(): void {
      useCounterStore().increment();
    },
  },
} );
</script>

• ☑️ Completions: Working, with types
• ☑️ Typescript: Doesn't complain
• ☑️ Increment action: Working

This provides working completions, Typescript accepts it, and the increment action works, but it feels wrong to call the store multiple times and I don't understand the performance implications of that.

---

This feels a little unsatisfying; I would expect the examples from the documentation to work without hassles like these. What is the actual, correct way to use Pinia in Vue2 with Typescript? I would prefer the first or second options using a setup hook (especially to make migrating to Vue3 easier later on), but that doesn't work or causes Typescript to trip over it.
What can I do to make the code work as advertised in the documentation?

(I can cobble up a repro repository if needed of course)

[ScottAwesome]

What IDE are you using?

[Radiergummi]

I'm on Jetbrains/PhpStorm

[posva]

You cannot destructure state like this

const { counter, increment } = useCounterStore();

It breaks reactivity, like with reactive(). Take the whole store into a variable instead or use storeToRefs(). Actions can be destructured. You should also use defineComponent() for improved typings

const counterStore = useCounterStore()

// like with reactive, you need to extract refs
const { counter } = storeToRefs(counterStore)
// actions can be destructured
const { increment } = counterStore

[Radiergummi]

I tried taking the whole store into a variable, see "Setting the store in the setup hook and accessing that". Regarding destructuring, I'm not inclined on doing it that way specifically, I'm just looking for a way to use Pinia with Vue2+TS that actually works. The documentation certainly isn't too clear here.
In that spirit, what is the recommended way of using a store in this case?

BTW: Using defineComponent over Vue.extend seems to yield the same result, but maybe I'm missing something?

[posva]

what isn't clear? You don't need anything specific to make types work. Note it could be your IDE not supporting typing in templates (but that's out of scope for a lib).

Note that verifying types with vue-tsc will still work as expected

[Radiergummi]

The setup hook example does not work as described in the documentation, see my original post: TS2339: Property 'store' does not exist on type 'CombinedVueInstance { msg: string; }>>'.
The example without a setup hook does not work in IntelliJ IDEs apparently, although you're right that's out of scope for a plugin.
That means Vue2 users with Webstorm will start with docs which don't work for them, at all. That is what isn't clear to me, because the docs otherwise do contain occasional notes on Vue2 usage.

I'm preparing a reproduction case for Jetbrains/IntelliJ, but I'd consider non-functional setup hook examples a problem..?

[posva]

That example is indeed confusing, I removed it from docs.

I think you are just missig defineComponent() (which is necessary to use with setup() in Vue 2 and Vetur (without Volar)):

It might be a good idea to disable/enable the extensions per workspace at .vscode/settings.json:

{
  "extensions.enabled": ["octref.vetur"],
  "extensions.disabled": ["vue.volar", "vue.vscode-typescript-vue-plugin"]
}

[Radiergummi]

Update: I've switched to using mapStores, which works for the time being; using setup hooks would be preferable, though. Might be worth adding to the documentation on Vue2 usage.

[DnOberon]

What does your code look like for that? I'm running into a similar situation where I can see all the state properties but none of the actions. Same issue with being stuck on vue 2 with vuetify

[Radiergummi]

@DnOberon somewhat like this:

import { defineComponent } from '@vue/composition-api';
import { mapStores } from 'pinia';
import { useFooStore } from '@/store/foo';
import { useBarStore } from '@/store/bar';

export default defineComponent( {
    computed: {
        ...mapStores(useFooStore, useBarStore),
    },
} );

[DnOberon]

Ah - I'm using the class component decorators. I was still getting compiler errors. I ended up rewriting our Vuex store instead of trying to deal with this. We're locked into Vue 2 right now and it kills me. The Vue 2 to 3 path hasn't quite gotten as bad as the Python 2 to 3 debacle, but it feels close.

[Radiergummi]

If I may, I'd recommend getting rid of class component decorators as soon as possible, and bite the Pinia bullet. Even though stuff like this is super annoying, the documentation is confusing as hell and using mapStores feels like a joke, Pinia is still tons easier to work with.

We used Vuex as commonly shown (exported named action constants etc.), so after the migration, we had about 80% less store-related code. Plus, suddenly you got proper types all the way from the API layer to the components, via the store. It's lovely.

[DnOberon]

Oh I'm not going to debate Pinia would be easier and better @Radiergummi - but the cost of switching away from decorators with our large number of components, the fact that it's not the only library we're waiting on vue 3 support for (vue-plotly and vuetify to name a few) means that even if I ditch class components I'd have a serious rewrite ahead of me at the moment. I also really like the decorator system and feel like it helped the TS components flow more naturally - I hate that the Vue team has seemingly unilaterally decided support for that isn't worth it (at least that's what it feels like with Vue 3's api changes?)