Call a Root Vuex Mutation or Action from within a Module in TypeScript

Share this video with your friends

Send Tweet

Everything in a Vuex Module is local to itself: the State, Mutations, Actions, Getters. But sometimes you need to call something from the outside. This lesson shows how you can call an external Mutation and Action from within a module in TypeScript.

F.
~ 5 years ago

Hi Alex, Great series. Thanks for putting it together. When I try to define the "state" object in the Vuex.Store instance in @/store/index.ts, I get the following error in VS Code for "state":

"Type '{count: number;}' is not assignable to type 'RootState | (() => RootState) | undefined. Type '{ count: number;)' is missing the following properties from type 'RootState': todos, login ts(2322) index.d.ts(91,3): The expected type comes from the property 'state' which is declared here on type 'StoreOptions<RootState>"

The only way I knew how to solve for this is to open types.ts and make todos and login optional under the RootState interface:

export interface RootState { count: number; todos?: TodoState; login?: LoginState; }

But, this seems like the wrong way to handle this. Did you encounter this at any point along the way? I'm curious as to your thoughts on this, although the example I recognize is somewhat contrived.

Thanks! -fermin

F.
~ 5 years ago

test

Aviel
~ 5 years ago

the better approach of it is export initState of todos/login and add them to the rootState import { initState as loginState } from "./login"; import { initState as todosState } from "./todos";

export default new Vuex.Store<RootState>({ state: { count: 0, todos: todosState, login: loginState }, modules: { todos } });