Quasar 2 (Beta 17), Vuex 4, typescript. Getters not showing in store.

[aarondreese]

I have dedided to go all-in with Q2, Vuex4 and Typescript. I have built the base application from the cli
quasar create q-ref --branch next
and generated a Quasar v2.0.0-beta.17 boilerplate.
In src/store/index.ts:
uncomment the imports for the example-module

import { store } from 'quasar/wrappers'
import { InjectionKey } from 'vue'
import {
  createStore,
  Store as VuexStore,
  useStore as vuexUseStore,
} from 'vuex'

import example from './module-example'
import { ExampleStateInterface } from './module-example/state';

export interface StateInterface {
  example: ExampleStateInterface,
}

// provide typings for `this.$store`
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $store: VuexStore<StateInterface>
  }
}

// provide typings for `useStore` helper
export const storeKey: InjectionKey<VuexStore<StateInterface>> = Symbol('vuex-key')

export default store(function (/* { ssrContext } */) {
  const Store = createStore<StateInterface>({
    modules: {
      example
    },
    strict: !!process.env.DEBUGGING
  })

  return Store;
})

export function useStore() {
  return vuexUseStore(storeKey)
}

in src/store/module-example/state.ts
added a new property to the interface and state() object

export interface ExampleStateInterface {
  prop: boolean;
  myvalue: string
}

function state(): ExampleStateInterface {
  return {
    prop: false,
    myvalue: 'Aaron'
  }
};
export default state;

in src/pages/Index.vue:
added an import for useStore, defined a constant, pull a value from the store example module using a computed property, return the computed value, use the value in the template interpolation

<template>
  <q-page class="row items-center justify-evenly">
    <q-card>{{mycomputedvalue}}</q-card>
  </q-page>
</template>

<script lang="ts">
import { defineComponent, computed} from 'vue';
import { useStore } from '../store'

export default defineComponent({
  name: 'PageIndex',

  setup() {
    const mystore =  useStore()
  
    const mycomputedvalue = computed(()=>{
      return mystore.state.example.myvalue
    })
    
    return {mycomputedvalue };
    }
});
</script>

So far so good.....now I'm struggling!
in src/store/module-example/getters.ts
export an interface to make the getters type-safe
modify the getters: to append the ExampleGetters to the GetterTree

import { GetterTree } from 'vuex';
import { StateInterface } from '../index';
import { ExampleStateInterface } from './state';

export interface ExampleGetters {
  getMyValue(state:ExampleStateInterface):string
}

const getters: GetterTree<ExampleStateInterface, StateInterface> & ExampleGetters = {
  getMyValue(state) {
    return state.myvalue
  }
};

export default getters;

but I don't get any intellisense in Index.vue when I try to add a new computed property:
in src/pages/Index.vue:

. . .
const valFromGetter = computed(()=>{
      return mystore.????
    })
    return {mycomputedvalue, valFromGetter };

I'm pretty sure that the issue lies in the getters file. the original code looked like

import { GetterTree } from 'vuex';
import { StateInterface } from '../index';
import { ExampleStateInterface } from './state';

const getters: GetterTree<ExampleStateInterface, StateInterface> = {
  someAction (/* context */) {
    // your code
  }
};

export default getters;

There is no interface for type definition and the getters being generated is not an extension of the GetterTree (using &) but an new instantiation of it.

What am I doing wrong and how do I fix it before (hopefully) applying the same logic to actions and mutations.

TIA

Aaron

[aarondreese]

OK. worked out the syntax:

const valFromGetter = computed(()=>{
      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
      return mystore.getters['example/getMyValue']
    })

but it has to be linter-protected as it is not type-safe. and as a result there is no intellisense on it :(