Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of how to use Modules in vuex, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this article on how to use Modules in vuex. Let's take a look at it.

1. What is the module Modules

Vuex allows us to split store into modules (Module), and each module has its own state, getters, mutation, action, and so on, or even nested sub-modules-- split in the same way from top to bottom.

Const moduleA = {state: () = > ({...}), mutations: {...}, actions: {...}, getters: {...}} const moduleB = {state: () = > ({...}), mutations: {...} Actions: {...}} const store = new Vuex.Store ({modules: {a: moduleA, b: moduleB}}) this.store.state.a / /-> get the status of moduleA this.store.state.b / /-> get the status of moduleB

Internal state, the state inside the module is local, that is, the module is private

The internal getter,mutation,action is still registered in the global namespace, which allows multiple modules to respond to the same mutation or action.

2. The internal parameters of the module.

For mutation and getter within the module, the first parameter received is the module's local state object state.

For the action inside the module, the local state is exposed through context.state, and the root node state is context.rootState:

For the getter inside the module, the root node state is exposed as the third parameter:

Const moduleA = {state: () = > ({count: "",}), actions: {/ / the state here is local RootState is the root node status incrementIfOddOnRootSum ({state, commit) RootState}) {if ((state.count + rootState.count)% 2 = 1) {commit ('increment')} mutations: {/ / the `state` object here is the module's local state increment (state) { State.count++}} Getters: {/ / the state here is local RootState is the root node state doubleCount (state) {return state.count * 2}, sumWithRootCount (state, getters, rootState) {return state.count + rootState.count}} 3, module namespace issues (1) namespaced: true makes the module a module with namespaces

When a module is registered, all its getter, action, and mutation are automatically named according to the path to which the module is registered.

Const store = new Vuex.Store ({modules: {account: {namespaced: true, / / module content (module assets) does not require additional space name prefixes in the same module when using module content (module assets). State: () = > ({}), / / the state in the module is already nested Using the `namespaced` attribute does not affect getters: {isAdmin () {}, / /-> use: getters ['account/isAdmin'], / / you can use the fourth parameter of getter to call someGetter (state, getters, rootState, rootGetters) {/ / getters.isAdmin / / rootGetters.someOtherGetter},} Actions: {login () {}, / /-> use: dispatch ('account/login') / / you can use the fourth parameter of action to call / / if you need to distribute action or submit mutation within the global namespace Pass {root: true} as the third parameter to dispatch or commit to someAction ({dispatch, commit, getters, rootGetters}) {/ / getters.isAdmin / / rootGetters.someGetter; / / dispatch ("someOtherAction"); / / dispatch ("someOtherAction", null, {root: true}); / / commit ("someMutation"); / / commit ("someMutation", null, {root: true}) }, someOtherAction (ctx, payload) {}, / / if you need to register a global action in a module with a namespace, you can add root: true and put the definition of the action in the function handler. OtherAction: {root: true, handler (namespacedContext, payload) {}, / /-> 'someAction'},}, mutations: {login () {}, / /-> use: commit (' account/login')} / / nested module modules: {/ / inherits the namespace of the parent module myPage: {state: () = > ({}), getters: {profile () {}, / /-> use: getters ['account/profile']},} / / further nesting namespace posts: {namespaced: true, state: () = > ({}), getters: {popular () {}, / /-> use: getters ['account/posts/popular']},}) (2) the use of binding functions with namespaces

When using functions such as mapState, mapGetters, mapActions, and mapMutations to bind modules with namespaces, it can be cumbersome to write:

Computed: {... mapState ({a: state = > state.some.nested.module.a, b: state = > state.some.nested.module.b})}, methods: {. MapActions (['some/nested/module/foo') / /-> this ['some/nested/module/foo'] ()' some/nested/module/bar' / /-> this ['some/nested/module/bar'] ()]}

CreateNamespacedHelpers creation is based on a namespace helper function, which returns an object with a new component binding helper function bound to a given namespace value.

Import {createNamespacedHelpers} from 'vuex' const {mapState, mapActions} = createNamespacedHelpers (' some/nested/module') export default {computed: {/ / find... mapState ({a: state = > state.a, b: state = > state.b})} Methods: {/ / look for... mapActions (['foo',' bar'])} 4 in `module module`. Module dynamic registration

After the store is created, you can register the module using the store.registerModule method

Import Vuex from 'vuex' const store = new Vuex.Store ({/ * option * /}) / register module `myModule` store.registerModule (' myModule', {/ /}) / register nested module `myModule` store.registerModule (['nested',' myModule'], {/ /.})

The state of the module can then be accessed through store.state.myModule and store.state.nested.myModule.

You can also use store.unregisterModule (moduleName) to dynamically unload the module. Note that you cannot use this method to uninstall static modules (that is, modules declared when creating a store).

You can check whether the module has been registered with store through the store.hasModule (moduleName) method.

This is the end of the article on "how to use Modules in vuex". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use Modules in vuex". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.