Vuex Getters and Typescript errors

user_13384306 0
Viewed 943

I have a project which uses Vuex and the Composition API. I have enabled typescript and I have a component which needs to pull a boolean value from a getter in my store module like so:

const flag = computed(() => store.getters['test/flag'])

the code works fine while I’m developing, but if I try to build it, I get the following typescript errors:

106:33 error Unsafe member access ['test/flag'] on an any value @typescript-eslint/no-unsafe-member-access 106:33 error Unsafe return of an any typed value
@typescript-eslint/no-unsafe-return

How do I configure the store to use getters with typescript?

vuex vue.js typescript
1 Answers

By default, Vuex stores are not type safe. You'll need to use a third party library to solve that.

Personally, I suggest using typed-vuex which works like a charm and only use wrappers around your existing vanilla store.

Then you can use your store like this.$accessor.test.flag with types.

Note: you can also just disable the eslint rule, it's up to you :)

user_48707850
Related