Vuex: Proposal: root actions for namespaced module

Created on 9 May 2017  路  2Comments  路  Source: vuejs/vuex

What problem does this feature solve?

I have app that contain dynamic views (kinda of mini app). Each view have its own module.
Also , in my app have a global filters of the data each view need to show.

Now , every time I change the global filters ,i need to make sure my dynamic view is refresh its own data.
Until now every module implement its own "refresh" action.

Since every dynamic view is like mini-app here , we decide to make them namespaced.
Now when "refresh" is dispatched my module didn't get the "global refresh event".

Simply what I want is to enable the namespaced module to register the some actions under the root namespace. Its enable namespaced modules to participate in root events while changing the namespaced module.
The root actions get the same context of the regular ones.

It's easy to implement in vuex , the question if this is necessary

P.S

maybe do the same for mutations

What does the proposed API look like?

Root propertry :

const store = new Vuex.Store({
  modules: {
    files: {
      namespaced: true,

      // module assets
      state: { ... }, // module state is already nested and not affected by namespace option
      getters: {
        bigFiles () { ... } // -> getters['files/bigFiles']
      },
      actions: {
        delete (namespacedContext) { ... }, // -> dispatch('files/delete')
        refresh: {
            root: true,
            handler (sameNamespacedContext) { ... } // -> dispatch('refresh')
        }
      },
      mutations: {
        delete () { ... } // -> commit('files/delete')
      }

    }
  }
})

or new "rootActions" :

const store = new Vuex.Store({
  modules: {
    files: {
      namespaced: true,

      // module assets
      state: { ... }, // module state is already nested and not affected by namespace option
      actions: {
        delete (namespaceContext) { ... } // -> dispatch('files/delete')
      },
      rootActions: {
        refresh (sameNamespaceContext) { ... } // -> dispatch('refresh')
      },
      mutations: {
        delete () { ... } // -> commit('files/delete')
      }

    }
  }
})
proposal

Most helpful comment

This proposal would be useful for cases where we want every module to have a chance of doing something when an action is dispatched.

For example, many modules may need to handle differently a userUpdated action, but calling each and every namespaced action is unnecessarily more complex than just dispatching a global userUpdated and letting the interested modules catch it.

All 2 comments

This proposal would be useful for cases where we want every module to have a chance of doing something when an action is dispatched.

For example, many modules may need to handle differently a userUpdated action, but calling each and every namespaced action is unnecessarily more complex than just dispatching a global userUpdated and letting the interested modules catch it.

Api reference still don't contain info about this feature.

Was this page helpful?
0 / 5 - 0 ratings