I am using typescript in Vue 2 project, and now I need use Vuex for first time with typescript. I wrote this based on answers which I found on SOF or blogs, but it gives me error and I have no idea how to fix it.
This is my code:
@Component({
computed: {
...mapState('auth', {
isUserAuthenticated: (state: AuthState) => state.auth.isUserAuthenticated
})
}
})
export default class App extends Vue {
isUserAuthenticated!: boolean;
drawer?: boolean = undefined;
navItems: Array<object> = [
{ title: 'Home', icon: 'mdi-home' },
];
}
and this is received error:
41:8 No overload matches this call.
Overload 1 of 6, '(namespace: string, map: string[]): { [x: string]: Computed; }', gave the following error.
Argument of type '{ isUserAuthenticated: (state: AuthState) => any; }' is not assignable to parameter of type 'string[]'.
Object literal may only specify known properties, and 'isUserAuthenticated' does not exist in type 'string[]'.
Overload 2 of 6, '(namespace: string, map: Record<string, string>): { [x: string]: Computed; }', gave the following error.
Type '(state: AuthState) => any' is not assignable to type 'string'.
Overload 3 of 6, '(namespace: string, map: Record<string, (this: CustomVue, state: unknown, getters: any) => any>): { [x: string]: () => any; }', gave the following error.
Type '(state: AuthState) => any' is not assignable to type '(this: CustomVue, state: unknown, getters: any) => any'.
Types of parameters 'state' and 'state' are incompatible.
Type 'unknown' is not assignable to type 'AuthState'.
39 | @Component({
40 | computed: {
> 41 | ...mapState('auth', {
| ^
42 | isUserAuthenticated: (state: AuthState) => state.auth.isUserAuthenticated
43 | })
44 | }
auth
is my vuex module defined like this (I'll add actions and mutations later, now I'm trying to read state), this is modules/auth/store/index.ts
:
import state from './state';
export default new Vuex.Store({
state
});
and state.ts
file:
export interface AuthState {
isUserAuthenticated: boolean;
}
export const state: AuthState = {
isUserAuthenticated: true
};
export default state;
and this is root file which will be register all modules in /store/index.ts
import auth from '@/modules/auth/store';
Vue.use(Vuex);
export default new Vuex.Store({
modules: { auth }
});