what is Vuex ?

I think everyone who has searched Vuex’s documentation has seen it,

Before learning the source code, of course, there are some prerequisites.

  1. Learn what Vuex does and how it is used.
  2. Familiar with Vuex and basic API.
  3. There is an inquiring mind (Balabla’s).

Vuex is commonly referred to as the state management mode and is used to address issues such as communication between components and sharing state among multiple components. The scenarios outlined in the documentation on the official website affect the overall context of the framework, which was intended to address these issues from the beginning,

What are the core apis of Vuex?

(= “-> symbol represents the auxiliary function provided in VUex)

  1. State: Data warehouse, where all data is stored. = data of the vue object.

  2. Getters: can be combined with the data in the warehouse to link the corresponding data = “vUE calculation properties -> mapGetters

  3. Mutation: update data in the data warehouse -> mapMutations

  4. Action: responsible for asynchronous operations (network requests, timers, etc.) calling mutation to update data -> mapActions

  5. Modules: The module pattern provides a namespace that enables state management to support tree structures. (Focus)

Break these apis down into two broad categories:

  1. Responsible for input to Vuex.
  2. Use to get data from Vuex.

Action and mutation address all ways of updating data to Vuex (synchronous and asynchronous).

Getters and State solve the problem of vUE components (which can also be internal to VuEX) getting data from Vuex.

Modules, of course, is a building block that gives Vuex a tree structure. You can organize Vuex into modules, each with methods such as Action, mutation, getters, and State. There is a parent-child relationship between modules.

These are some of the methods that are internal to Vuex and can be used on a Vuex instance. Instances of Vuex are typically mounted on Vue objects.

Auxiliary function

Vuex also provides a set of helper functions for ease of use

When using Vue for development, we have a large number of States, getters, mutations, and Actions to use, and using vuex instances for each invocation wastes a lot of code, especially after namespaced. Vuex instances need namespaces to call these methods, so there are four methods that receive a namespace (which can be empty), a namespace prefix, and an object or array.

  1. MapState creates computed properties for the component to return the state in the Vuex Store.
  2. MapGetters creates computed properties for the component to return the return value of the getter.
  3. MapMutations creates the component method to distribute the action.
  4. MapActions creates a component method to commit mutation.

The above methods are generated for Vue component traversal.

But that’s not enough. You write namespaces for each one, and helper functions also provide createNamespacedHelpers. Create an helper function for the specified namespace,

conclusion

The features of Vuex are first divided into two categories:

  1. Vuex’s own examples use Getters, Mutations, and Actions
  2. Vuex provides auxiliary functions mapGetters, mapMutations, mapActions, mapState and createNamespacedHelpers for the convenience of using components

Vuex itself has two internal functions for data state:

  1. Change the data status action: asynchronous mutation: synchronization.
  2. Getter: can be calculated. State: Directly returns the data status.

Modes Vuex supports: Modules, which provide a tree structure for Vuex and a namespace to help Vuex be hierarchical.

The next chapter analyzes the context

I am a fresh graduate, recently maintained a public account with friends, the content is that we are in the transition from fresh graduate to the development of this way stepped on the pit, has been our step by step learning records, if interested in friends can pay attention to it, together with fuel ~