Use Namespaces in Vuex Stores using TypeScript

Share this video with your friends

Even by using modules, they still share the same namespace. So you couldn’t have the same mutation name in different modules. Namespaces solve that by prepending the path of the module to the State, Getter, Action, and Mutation.

This lesson shows how to use namespaces in Vuex modules with TypeScript.

Matthew

~ 6 years ago

The namespaces should be created like this now (https://github.com/ktsn/vuex-class):

const Login = namespace('login')```

and used like this:

```@Login.State login!: LoginState
@Todo.Getter todos!: Todo[] 
@Todo.Getter dones!: Todo[] ```

Note that the lazy loading of the login state module causes problems with the namespace creation as shown above. This had to be removed to get this to work.

Would be great if Alex could update the example and show how this works with lazy loading too.