VueX record learning knowledge, infringement can be deleted! — March 23, 2021 at 22:05:59

What does VueX do?

Official explanation: VueX is a state management mode developed specifically for vue.js applications.

  • It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way.
  • Vuex is also integrated into Vue’s official debugging tool, DevTools Extension, which provides advanced debugging functions such as zero-configuration time-travel debugging, status snapshot import and export, and so on.

What is state management?

  • You can simply think of it as storing all the variables that need to be shared by multiple components in one object.
  • This object is then placed in the top-level Vue instance and made available to other components.
Vuex is designed to provide a plug-in that shares state across multiple components.

Second, manage what state?

What state needs to be shared between multiple components?

  • Large development, encounter multiple states, in multiple interface sharing problems.
  • Such as user login status, user name, profile picture, location information and so on.
  • Such as the collection of goods, shopping cart items and so on.
  • All of this state information can be stored and managed in a single place, and it’s responsive.

3. Vuex core Concepts

1.State related usage

State Indicates a single State tree

  • Vuex uses a single state tree to manage all states at the application level

  • Create only one Store object (all information that needs to be managed is placed in one Store object)

  • A single state tree allows us to find fragments of a state in the most direct way, and it is also very easy to manage and maintain in the future maintenance and debugging process

2.Getters is basically used

  • Getters can be used to obtain some state variation from the store.

Getters as arguments and pass arguments

3.Mutation related use

3.1 Mutation Status update

The only way to update the store state of Vuex is to commit Mutation

Mutation mainly includes two parts:

  • Event type of string (type)
  • A callback function (hander) whose first argument is state.

Mutation is defined as follows:

mutations:{
    increment(state){
        state.count++
    }
}
Copy the code

Update by mutation

increment:function(){
    this.$store.commit('increment')}Copy the code

3.2 Mutation transfer parameters

Additional parameters can be carried when a parameter is updated by mutation

  • The parameter is called the Payload of mutation.

Code in Mutation:

decrement(state,n){
    state.count -= n
}
Copy the code
decrement:function(){
    this.$store.commit('decrement'.2)}Copy the code

What if there’s not one parameter?

  • There are a lot of parameters to pass
  • It’s usually passed as an object, so payload is an object
  • And extract the relevant information from the object
changeCount(state,payload){
    state.count = payload.count
}
Copy the code
changeCount:function(){
    this.$store.commit('changeCount', {count:0})}Copy the code

3.3 Mutation submission style

  • Common commit encapsulation: Commit via COMMIT

    this.$store.commit('incrementCount',count)
Copy the code

  • Special type of submission encapsulation: an object containing the type attribute

this.$store.commit({
    type:'changeCount'.count:100
})
Copy the code
  • In Mutation, the whole commit object is used as payload, so the code remains unchanged as follows:
changeCount(state, payload){
    state.count = payload.count
}
Copy the code

3.4 Mutation response rule

The state in Vuex’s store is responsive, and the Vue component updates automatically when the data in the state changes.

Some Vuex rules must be followed:

  • Initialize the required properties in store ahead of time

  • When adding new attributes to objects in state, use the following method:

    Vue. Set (obj,’ newProp ‘,123)

    Method 2: reassign with a new object

3.5 Mutation Constant type – concept

  • In mutation, many event types (including method names) are defined
  • As the project grows, more and more states are managed by Vuex, and more and more states need to be updated, which means more and more methods in Mutation
  • There are too many methods, users need to spend a lot of energy to remember these methods, and even multiple files switch back and forth to check the method name, and it is easy to write wrong

3.6 Mutation synchronization function

In general, Vuex requires that the methods in our Mutation be synchronous methods.

  • The main reason is that devTools can help us capture mutation snapshots when we use devTools
  • If the operation is asynchronous, devTools will not do a good job of tracking when the operation will be completed

In general, do not use asynchronous operations in mutation.

4. Basic definition of Action

In some cases, you want to do asynchronous operations in Vuex, such as network requests, which must be asynchronous.

Action is similar to Mutation and is used instead of Mutation to perform asynchronous operations.

  • Any asynchronous operation must be done within the Action
  • The Action itself can return a Promise, then fetch the Promise in another place, write a THEN directly after it, and continue using the Promise

5. How do you do

Module means Module. Why do we use modules in Vuex?

  • Vue uses a single state tree, which means that a lot of state is handed over to Vuex to manage.
  • When the application becomes very complex, the Store object can become quite bloated.
  • To solve this problem, Vuex allows us to split the Store into modules, and each Module has its own state, mutations, actions, getters, etc

6. Vuex-store folder directory

store
  • Index.js # where to assemble modules and export store
  • Actions. Js # Root level action
  • Mutations. Js # mutation of the root level
  • Getters. Js # Root level getter
  • modules
    • Modulea.js # A module
    • Moduleb.js # B module