Questions tagged [vuex-modules]

Use this tag for Vuex questions in which the store is subdivided into Vuex modules.

As a Vuex application grows in scale, the store and state tree can get increasingly bloated.

To help with that, Vuex allows us to divide our store into modules. Each module can contain its own state, mutations, actions, getters, and even nested modules.

By default, actions, mutations and getters inside modules are still registered under the global namespace - this allows multiple modules to react to the same mutation/action type.

Read more in the Modules section of Vuex's official website

327 questions
7
votes
2 answers

Vuex Modules issue with _mapGetters() : getters should be function

I am trying to restructure my project using Vuex Modules. If everything was running fine previously, I am now getting an error in my App.vue component, related to __mapGetters w module vuex.esm.js?358c:97 Uncaught Error: [vuex] getters should be…
user762579
6
votes
3 answers

Nuxt access store (in Module mode) from JS file

I have an AuthService that I use in a namespaced store in my Nuxt app. I need to commit mutations from AuthService to the namespaced store but I can't figure out how to import the store into my AuthService. I've seen examples where the store is…
Nic Stelter
  • 641
  • 2
  • 7
  • 19
6
votes
1 answer

Vuex reusable module pattern. Using function for state not working

I have a form composed of 1 or more (user decides) Transactions. I display Transactions inside a component on the parent and set the Transaction's attributes with computed properties in the child (Transaction) component. User data is updated by the…
sirramongabriel
  • 583
  • 1
  • 11
  • 27
6
votes
3 answers

Vuex action dispatch problem with electron

I have electron app with vuex. Store is configured for whole app with modules, my test module Browser.js: export default { namespaced: true, state: { currentPath: 'notSet' }, mutations: { setPath (state) { state.currentPath =…
Daimos
  • 1,473
  • 10
  • 28
5
votes
1 answer

Vue.js - Get current route in Vuex module

I have a namespaced vuex store that returns an entry of the store based on the parameter of the current route. import Router from '../../router/index' const options = { routeIdentifier: 'stepId' } export function fromRoute(state) { if…
Frnak
  • 6,601
  • 5
  • 34
  • 67
5
votes
1 answer

Use mapState with typescript

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({ …
Denis Stephanov
  • 4,563
  • 24
  • 78
  • 174
5
votes
5 answers

Vuex mapstate object undefined and "[vuex] unknown mutation type: "

I'm new with vue.js and vuex and I've an issue with the mapstate object, first I've only one module in my store: -Store -index.js -mutations.js -actions.js -state.js state.js : export default { userInfo: { messages: [{ 1: 'test', 2:…
Fabio Venturi Pastor
  • 2,519
  • 3
  • 19
  • 32
5
votes
2 answers

How to access 'this' in Vuex store module state

For example, say I have a "store" directory like this: ... store ├── auth │   └── user.js └── index.js ... index.js import Vue from 'vue'; import Vuex from 'vuex'; import {user} from './auth/user'; Vue.use(Vuex); /* eslint-disable no-new */ const…
DjH
  • 1,448
  • 2
  • 22
  • 41
4
votes
1 answer

Vuex 4 + Vue 3 using shared state actions in modules

I have a Vue 3 app (without TypeScript), and I'm using a Vuex 4 store. I have my store separated into modules that represent some common themes, for example I have a user module that contains the store, getters, actions etc that are appropriate for…
Sensanaty
  • 894
  • 1
  • 12
  • 35
4
votes
1 answer

How to get all registered Vuex modules

Is there any way to iterate over all Vuex modules? I registered my namespaced modules like this: $store.registerModule('module-xyz', module); Now is there any way to get the list of all of them?
iSun
  • 1,714
  • 6
  • 28
  • 57
4
votes
1 answer

Vue.js Auto register Vuex modules in a specific way

I have just started with Vue.js and I am trying to use Vuex. I have the following structure inside my directory: src/store/ store ├── index.js └── modules ├── app │   └── index.js └── auth └── index.js Within each module, I…
leo95batista
  • 699
  • 9
  • 27
4
votes
2 answers

VUEX - Many mapActions with same action name on the same page

I have several differents files for a lot of modules. Some of the share the same action name There is some page that use 2 or more mapActions for different modules On my page is something like this: methods: { ...mapActions({ documents:…
Leonardo Cavalcante
  • 1,274
  • 1
  • 16
  • 26
4
votes
1 answer

How to use mapGetters with Vuex Modules

i have added modules in store/index.js import NavMessage from './nav/message/index'; new Vuex.Store({ modules: { NavMessage, }, }); my message/index.js import state from './state'; import getters from './getters'; import mutations from…
sid heart
  • 1,140
  • 1
  • 9
  • 38
4
votes
1 answer

How to re-use component that should use unique vuex store instance

I try to find a way to use vuex with reusable component which store data in a store. The thing is, I need the store to be unique for each component instance. I thought Reusable module of the doc was the key but finally it doesn't seem to be for…
NuoNuo LeRobot
  • 370
  • 3
  • 16
4
votes
1 answer

vuex not loading module decorated with vuex-module-decorators

I get this error when trying to load a store module with the vuex-module-decorators into the initialiser: vuex.esm.js?2f62:261 Uncaught TypeError: Cannot read property 'getters' of undefined at eval (vuex.esm.js?2f62:261) at Array.forEach () at…
user1037355
1
2
3
21 22