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

This article mainly explains the "API document in Vuex case analysis", the content of the explanation is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "API document description case analysis in Vuex" it!

Constructor option state

Type: Object

The root state object of the Vuex store instance

Mutations

Type: {[type: string]: Function}

Registering mutation on store, the handler always accepts state as the first parameter (local state of the module if defined in the module) and payload as the second parameter (optional)

Actions

Type: {[type: string]: Function}

Register action on store. The handler accepts a context object that contains the following properties:

{state, / / equivalent to store.state, local state rootState in module, / / equivalent to store.state, only exists in module commit, / / equivalent to store.commit dispatch, / / equivalent to store.dispatch getters / / equivalent to store.getters} getters

Type: {[key: string]: Function}

Register the getter,getter method on store to accept the following parameters:

State, / / the local state of the module if defined in the module

Getters, / / equivalent to store.getters

It's special when it's defined in a module.

State, / / the local state of the module if defined in the module

Getters, / / equivalent to store.getters

RootState / / is equivalent to store.state

RootGetters / / all getters

The registered getter is exposed as store.getters

Modules

Type: Object

Objects that contain submodules will be merged into store

{key: {state, namespaced?, mutations, actions?, getters?, modules?},...}

Like the options for the root module, each module contains state and mutations options. The state of the module is associated with the root state of the store using key. The mutation and getter of the module only receive the local state of module as the first parameter, not the root state, and the context.state of the module action also points to the local state.

Plugins

Type: Array

An array containing plug-in methods applied to store. These plug-ins directly accept store as the only parameter, and can listen to mutation (for external data persistence, logging, or debugging) or submit mutation (for internal data, such as websocket or some observers).

Strict

Type: Boolean

Default value: false

Put Vuex store into strict mode. In strict mode, any modification of Vuex state outside the mutation handler will throw an error

Instance property state

Type: Object

Root status, read-only

Getters

Type: Object

Expose registered getter, read-only

Instance method commit (type: string, payload?: any, options?: Object) | commit (mutation: Object, options?: Object)

Submit mutation. There can be root: true in options, which allows the mutation of the root to be submitted in the namespace module

Dispatch (type: string, payload?: any, options?: Object) | dispatch (action: Object, options?: Object)

Distribute action. There can be root: true in options, which allows root action to be distributed in the namespace module. Returns a Promise that parses all triggered action processors

ReplaceState (state: Object)

Replace the root state of store, using only state merge or time travel debugging

Watch (getter: Function, cb: Function, options?: Object)

Responsively monitors the return value of a getter method and calls the callback function when the value changes. Getter receives the status of the store as the only parameter. Receives an optional object parameter that represents the parameter of the vm.$watch method of Vue.

To stop monitoring, call the returned handler directly

Subscribe (handler: Function)

Register the mutation that listens to store. Handler is called after each mutation is completed, receiving the mutation and the status after the mutation as parameters

Store.subscribe ((mutation, state) = > {console.log (mutation.type) console.log (mutation.payload)})

Commonly used for plug-ins

RegisterModule (path: string | Array, module: Module)

Register a dynamic module

UnregisterModule (path: string | Array)

Uninstall a dynamic module

HotUpdate (newOptions: Object)

Hot replacement of new action and mutation

Auxiliary function mapState (namespace?: string, map: Array | Object): Object

Create a calculation property for the component to return the state in the Vuex store. The first parameter is optional and can be a namespace string

MapGetters (namespace?: string, map: Array | Object): Object

Create a calculation property for the component to return the return value of getter. The first parameter is optional and can be a namespace string

MapActions (namespace?: string, map: Array | Object): Object

Create a component method to distribute the action. The first parameter is optional and can be a namespace string

MapMutations (namespace?: string, map: Array | Object): Object

Create a component method to submit the mutation. The first parameter is optional and can be a namespace string

CreateNamespacedHelpers (namespace: string): Object Thank you for your reading, the above is the content of "case Analysis of API documents in Vuex". After the study of this article, I believe you have a deeper understanding of the problem of case analysis of API documents in Vuex, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.