Stack Overflow
Stack Overflow

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
256
votes
2 answers

Is there a way to dispatch actions between two namespaced vuex modules?

Is it possible to dispatch an action between namespaced modules? E.g. I have Vuex modules "gameboard" and "notification". Each are namespaced. I would like to dispatch an action from the gameboard module in the notification module. I thought I could…
Chris Schmitz
  • 20,160
  • 30
  • 81
  • 137
16
votes
1 answer

Making only one module persistent with vuex-persistedstate

I need to use vuex-persistedstate to make only one of my modules to persists state through refresh of the page. Right now, it doesn't work when I use plugins: [createPersistedState()] only inside the user module. plugins: [createPersistedState()]…
Ondřej Ševčík
  • 1,049
  • 3
  • 15
  • 31
16
votes
1 answer

Can a Vuex module watch another Vuex module?

Can Vuex modules watch the state of other modules, and trigger actions consequently? For example, let's consider the following case: store.js import time from './store/time' ; import position from './store/position' ; const store = new…
Lucas
  • 823
  • 10
  • 19
13
votes
6 answers

NuxtServerInit not working on Vuex module mode - Nuxt.js

NuxtServerInit is not working on initial page render on nuxt js vuex module mode. But it works on Classic mode. Following code is the flow I used. My api call api/CategoryApi.js import axios from 'axios'; const HEADERS = { Accept:…
Manikandan
  • 502
  • 1
  • 7
  • 17
12
votes
3 answers

Vuex-module-decorator, modifying state inside an action

Using the vuex-module-decorator I have a authenticate action that should mutate the state. @Action public authenticate(email: string, password: string): Promise { this.principal = null; return authenticator …
gervais.b
  • 2,294
  • 2
  • 22
  • 46
12
votes
5 answers

Accessing Vuex store module's state inside router.ts

I followed this tutorial to set up a Vuex store with modules using TypeScript. So far I have: vuex/types.ts: export interface RootState { version: string; } vuex/user-profile.ts: import { ActionTree, Module, MutationTree } from 'vuex'; import {…
Andre12
  • 554
  • 1
  • 7
  • 17
11
votes
2 answers

Can not debounce action within other action in Vuex

I'm trying to debounce anything within an Action, it gets swallowed in one way or another... Take this (pseudo) code: import { debounce } from "lodash"; const actions = { debounceSomeLogging ({ dispatch }, text) { console.log("Outside…
Titulum
  • 9,928
  • 11
  • 41
  • 79
11
votes
3 answers

Can I use "this" in mapMutations spread inside Vue instance methods?

I want to set Vuex mutations as follows: export default { props: { store: String }, methods: { ...mapMutations({ changeModel: `${this.store}/changeModel` }) } } But I catch the error: Uncaught…
mcmimik
  • 1,389
  • 15
  • 32
9
votes
1 answer

Is there a way to get the name of the nameSpaced vuex module inside its action or mutation?

I have multiple vuex modues with nameSpaced: true in my application. Inside the action or mutations of the modules I want to know the name of the parent module. say I have 2 modules, 'a' and 'b', I call the mutation…
Neelotpal
  • 337
  • 5
  • 17
8
votes
1 answer

Vuex unregisterModule what does it do?

I'm a bit confused with what unregisterModule is actually doing. If we have a module like so: { state: { page: 1 } } Then un/register it dynamically: beforeCreate() { this.$store.registerModule('items',…
Rob
  • 10,851
  • 21
  • 69
  • 109
8
votes
2 answers

Access module from Vuex Store

I have the following module: export const ProfileData = { state: { ajaxData: null; }, getters: {/*getters here*/}, mutations: {/*mutations here*/}, actions: {/*actions here*/} } and this module is registered in my…
Arnold Zahrneinder
  • 4,788
  • 10
  • 40
  • 76
7
votes
1 answer

How to use setTimeout on vuex action?

I would like to empty the alert state, so that the alert is not displayed, I don't really know how to trigger removeAlert action x seconds after addMovieToFavourites or removeMovieToFavourites executed, code below, thanks. alert.js const state = { …
Gabor
  • 151
  • 3
  • 10
7
votes
3 answers

Vuex: createNamespacedHelpers with dynamic namespace

In almost all guides, tutorial, posts, etc that I have seen on vuex module registration, if the module is registered by the component the createNamespacedHelpers are imported and defined prior to the export default component statement, e.g.: import…
SumNeuron
  • 4,850
  • 5
  • 39
  • 107
7
votes
2 answers

Vuex Module Initialization Best Practice

(updated with additional background) I have a Vuex store module that needs to load its data at the beginning of time, automatically, so it's available when requested (in this case it's a 'settings' store that loads data from electron-settings at…
Jim B.
  • 4,512
  • 3
  • 25
  • 53
7
votes
2 answers

How to create getters and setters for vuex namespaced module state

If I have a Vuex module which is namespaced, how to create the getters and setters for the states in that module when using these state in Vue components? // My component new Vue({ computed: { // How do I add setters also below???? …
Andy
  • 2,493
  • 6
  • 37
  • 63
1
2 3
…
21 22