Daily more text ~~

Vuex concept

Achieve multi-component state management, multiple components need to share data.

Vuex differs from a purely global object in two ways:

  1. Vuex’s state storage is reactive. When the Vue component reads the state from the Store, if the state in the store changes, the corresponding component is updated efficiently accordingly.
  2. You can’t just change the state in the store. The only way to change the state in a store is to commit mutation explicitly. This allows us to easily track each state change, which allows us to implement tools that help us better understand our application.

The five cores of VUEX

  1. State: Is responsible for state management, similar to data in VUE, used to initialize data;
  2. Mutations: Used to modify data in state, triggered by commit;
  3. Action: can handle asynchrony, used with dispatch trigger, cannot directly modify state; The action needs to be triggered by DISPATCH in the component first, and then mutation is triggered by commit in the action function, through which the state value is modified.
  4. GettersComputed properties in VUex, analogous to computed properties in VUE, depend on the value of state. When the value of state changes, the getter recalculates. That is, when one data changes depending on another, the getter is used.
  5. Modules: Modular management, dividing the store into different modules

Mutations

Mutations methods all have default parameters :([state],[payload])

  • state: state in the current Vuex object;
  • payload: this method is used to pass arguments when called.
Modify the data in state

Example: Modify data in state

import Vue from 'vue';
import Vuex from 'vuex'
Vue.use(Vuex);

const  store = new Vuex.store({
 state: {name:'weirui'
 },
 mutations: {edit(state){
     state.name = 'wei'; }}})export default = store;
Copy the code

In the component we call this. codestore.mit (‘edit’); You can change the value of name.

Sometimes we need to carry parameters for the mutations method to use:

Single parameter:

this.$store.commit('edit'.'wei');
Copy the code

Multiple parameters:

this.$store.commit('edit', {name:'wei'.sex:'woman'});
2 / / way

this.$store.commit({
    type:'edit'.payload: {name:'wei'.sex:'woman'}})Copy the code

When receiving the parameters in mutations:

edit(state,payload) {
  console.log(payload); // 'wei' or {name:'wei',sex:' female '}
}
Copy the code
Add or delete members in state
  • Vue. Set Sets the value of a member for an object, or adds it if it does not exist

For example, add an age member to the state object:

Vue.set(state,"age".24);
Copy the code
  • Vue.delete Deletes a member

Delete the age member you just added

Vue.delete(state,'age');
Copy the code

Actions

Because you operate asynchronously directly in the mutation method, you will cause data invalidation. So Actions are provided specifically for asynchronous operations, and the mutation method is eventually submitted.

Methods in Actions have two default arguments

  • context: context (equivalent to this in the arrow function) object
  • payload: Mount parameters

For example, we execute the edit method we just did in two seconds

Since setTimeout is an asynchronous operation, we need to use actions:

actions:{
    aEdit(context,payload){
        setTimeout(() = >{
            context.commit('edit',payload)
        },2000)}}Copy the code

$store. Dispatch (‘aEdit’,{age:24});

Since this is an asynchronous operation, we can encapsulate a Promise object:

 aEdit(context,payload){
      return new Promise((resolve,reject) = >{
          setTimeout(() = >{
             context.commit('edit',payload)
             resolve()
          },2000)})}Copy the code

Getters

Members in state are processed and passed to the outside world, again with two default parameters:

State: state object in the current VUEX object; Getters: The current getters object used to use other getters under getters;

getters:{
    nameInfo(state){
        return "Name:" + state.name;
    },
    fullInfo(state,getters){
        return getters.nameInfo + 'age:+ state.age; }}Copy the code

This.$store.getters. FullInfo;

modules

When a project is large and has many states, modular management can be adopted. Vuex allows us to split the Store into modules. Each module has its own state, mutation, action, getter, and even nested submodules — split the same way from top to bottom.

modules:{
    a: {state: {},getters: {},... }}Copy the code

The state of calling module A within the component:

this.$store.state.a;
Copy the code