Quick understanding and example application of Vuex state machine

1. Quick understanding of concepts:

1. How to share data between components:

There are usually the following ways:

1. Passing values ​​from parent to child: v-bind attribute binding ;
2. Child passes value to parent: v-on event binding ;
3. Sharing data between sibling components: EventBus ;

2. What is vuex:

1. According to the official statement, Vuex is a state management mode developed specifically for Vue.js applications. It uses centralized storage to manage the status of all components of an application and uses corresponding rules to ensure that the status changes in a predictable manner. Vuex is also integrated into Vue's official debugging tool devtools extension (opens new window), providing advanced debugging features such as zero-configuration time-travel debugging, state snapshot import and export, etc.
2. Simply put, Vuex is a mechanism for implementing component global state (data) management, which can easily realize data sharing between components.

3. Advantages of using vuex:

1. Ability to centrally manage shared data in vuex, making development and later maintenance easier.
2. It can efficiently realize data sharing between components and improve development efficiency.
3. The data stored in vuex is responsive and can keep the data and the page synchronized in real time.
4. Solve the message passing of non-parent-child components (storing data in state).
5. The number of AJAX requests is reduced, and some scenarios can be obtained directly from the state in memory.
   

Generally speaking, only data shared between components needs to be stored in vuex. However, this is not necessary for private data in components, and they can still be stored in the component's own data. Of course, if you want to store them all in vuex, that's fine too.

2. Basic use:

1. Install dependency packages:

npm install vuex --save

2. Import dependent packages:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

3. Create a store object:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
//The state stores the globally shared data state: {
    count: 0
  }
})

4. Mount the store object to the vue instance:

new Vue({
  el: '#app',
  store
})

At this point all components can get data from the store.

3. Create a project:

The following is a process for creating a vue project , and there will be cases later:

(1) Open the cmd window and enter vue ui to open the Vue visualization panel:

(2) Select the new project path:

(3) Naming:

(4) Manually select the configuration, note that the vue2 version is used:

(5) Create:

(6) Next steps:

(7) After the creation is successful, go to the corresponding directory and open vscode to start programming:

(8) Run the project:

4. Prerequisites for explanation:

Prerequisites (Note):

Write a small counter case, and you can get started with vuex faster by combining the concepts from the case . Therefore, the following code section in the core concept is demonstrated based on this small case. Goal: Write two child components with a common count value. In the parent component, one component reduces the count value by 1 after clicking, and the other component increases the count value by 1 after clicking.

Parent component App.vue initial code:

<template>
  <div id="app">
       <my-add></my-add>
       <p>--------------------</p>
       <my-reduce></my-reduce>
  </div>
</template>

<script>
// Import components import Add from './components/Add.vue'
import Reduce from './components/Reduce.vue'
export default {
  name: 'App',
  data() {
    return {
      
    }
  },
  components:
    'my-add': Add,
    'my-reduce': Reduce
  }

}
</script>

Subcomponent Add.vue initial code:

<template>
    <div>
        <p>The count value is:</p>
           <button>+1</button>
    </div>
 
</template>
<script>
  export default{
      data() {
          return {
              
          }
      },
  }
</script>

Subcomponent Reduce.vue initial code:

<template>
    <div>
         <p>The count value is:</p>
           <button>-1</button>
    </div>
</template>
<script>
  export default{
      data() {
          return {
              
          }
      },
  }
</script>

The initial code of the store object is:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  }
})

Initial effect:

5. Core concepts:

1.state:

According to the official words, Vuex uses a single state tree - yes, one object contains the entire application-level state. From this point on it exists as a "Single Source of Data (SSOT)". This also means that each application will contain only one store instance.

Simply put , State provides the only public data source, and all shared data must be stored in the State of Store.

1.1 The first way to access state in a component:

Enter the following command directly in the component:

the data name referenced by this.$store.state.

As quoted in the Add.vue subcomponent:

<template>
    <div>
        <p>The count value is: {{this.$store.state.count}}</p>
           <button>+1</button>
    </div> 
</template>
//The following code is the same as before, so it is omitted

Looking at the effect, the value of count is shown to be 0:

1.2 The second way to access state in a component:

(1) Import the mapState function from vuex on demand

import { mapState } from 'vuex'

(2) Through the mapState function just imported, the global data required by the current component is mapped to the computed properties of the current component:

computed: {
   ...mapState([count])
}

Tips: computed is used to monitor self-defined variables. The variable is not declared in data, but defined directly in computed. Then, two-way data binding can be performed on the page to display the result or used for other processing.

As quoted in the Reduce.vue subcomponent:

<template>
    <div>
         <p>The count value is: {{count}}</p>
           <button>-1</button>
    </div>
</template>
<script>
import {mapState} from 'vuex'
  export default{
      data() {
          return {
              
          }
      },
      computed: {
         ...mapState(['count'])
      }
  }
</script>

Looking at the effect, the value of count is also shown to be 0:

2. mutation:

According to the official statement, the only way to change the state in the Vuex store is to submit a mutation. Mutations in Vuex are very similar to events: each mutation has a string event type (type) and a callback function (handler). This callback function is where we actually make the state change, and it receives state as the first argument.

Simply put, Mutation is used to change the data in the Store.
① Store data can only be changed through mutation, and the data in the Store cannot be directly operated.
②Although this method is a little more complicated to operate, it can centrally monitor changes in all data.

For example, to implement the operation of increasing the count value by 1, define a function that increases by 1 in the motions first. Then if the corresponding subcomponent wants to use it, the component can directly introduce the mutation and call the corresponding function.

As follows, the Add.vue subcomponent needs to implement the self-increment 1 function:

First, define a function add that can achieve self-increment in the mutations in the state machine:

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations:
    //Self-increment 1 function add(state){
      state.count++
    }
  }
})

2.1 The first way to trigger mutation:

In the Add.vue subcomponent, bind the click event to the button and trigger the mutation:

<template>
    <div>
        <p>The count value is: {{this.$store.state.count}}</p>
           <button @click="btnAdd">+1</button>
    </div>
 
</template>
<script>
  export default{
      data() {
          return {
              
          }
      },
      methods: {
          btnAdd() {
              // The first way to introduce mutation is to trigger the add function this.$store.commit('add')
          }
      }
  }
</script>

Look at the effect to achieve click self-increment:

2.2 Trigger mutation and pass parameters:

Of course, when the component calls the function in the mutation, parameters can also be passed.

For example, there is a self-incrementing function, but the amount of increment depends on the parameters passed in when calling it:

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations:
    // Pass in parameters, the first one must be state, the second one is the passed in parameter // Function that increases n by itself addN(state,n){
      state.count+= n
    }
  }
})

When calling the corresponding component, you need to pass in parameters:

  methods: {
          btnAdd2() {
              // Introduce mutation method, trigger addN function // and pass parameters, increase by 6 this.$store.commit('addN',6)
          }
      }

2.1 The second way to trigger mutation:

(1) Import the mapMutations function from vuex on demand

import { mapMutations } from 'vuex'

(2) Through the mapMutations function just imported, map the required mutations function to the methods method of the current component:

methods: {
   ...mapMutations(['add','addN'])
}

In practice, realize the function requirement of Reduce.vue component to reduce the value by 1 when clicking:

The state machine adds a decrement function:

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations:
    //Self-increment 1 function add(state){
      state.count++
    },
    // Function that decrements by 1 sub(state){
      state.count--
    }
  }
})

Reduce.vue component reduces itself by 1 by clicking the button:

<template>
    <div>
         <p>The count value is: {{count}}</p>
           <button @click="btnSub">-1</button>
    </div>
</template>
<script>
//Import import {mapState,mapMutations} from 'vuex'
  export default{
      data() {
          return {
              
          }
      },
      computed: {
         ...mapState(['count'])
      },
      methods: {
          // Map the sub function in mutation...mapMutations(['sub']),
          // To decrement, call the sub function btnSub(){
             this.sub()
          }
      }
  }
</script>

See the effect:

3.Action:

So far, the case in the fourth point has been completed, and self-increment and self-decrement have been implemented. Now let's improve the case. We need to click the button one second before self-increment and self-decrement. How can we achieve this? Can I add a 1-second timer to the function in the mutation in the state machine? This is definitely not possible because mutation does not support asynchronous operations . So what should I do? Ding ding ding, Action makes its debut.

Action can contain any asynchronous operations, so it is used to handle asynchronous tasks.
Action submits a mutation, rather than directly changing the state. Remember that it cannot directly modify the data in the state, only mutation can modify it. That is to say, if you want to change data through asynchronous operations, you must use Action instead of Mutation. However, you still need to change data indirectly by triggering Mutation in Action.

First define the Action in the state machine:

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations:
    //Self-increment 1 function add(state){
      state.count++
    },
    // Function that decrements by 1 sub(state){
      state.count--
    }
  },
  // Define action, the addAsync function in it implements the add function in mutation after 1 second actions: {
    addAsync(context) {
      setTimeout(()=>{
      //Must trigger the mutation through context.commit()context.commit('add')
    },1000)
  }  
 }
})

Action functions accept a context object that has the same methods and properties as the store instance, so you can call context.commit to commit a mutation.

3.1 The first way to trigger an Action:

Change the component Add.vue code, introduce Action, and implement asynchronous self-increment operation.

<template>
    <div>
        <p>The count value is: {{this.$store.state.count}}</p>
           <button @click="btnAdd">+1</button>
    </div>
 
</template>
<script>
  export default{
      data() {
          return {
              
          }
      },
      methods: {
          btnAdd() {
              // The first way to introduce Action is to trigger the addAsync function // The dispatch here is specifically used to call the action function this.$store.dispatch('addAsync')
          }
      }
  }
</script>

See the effect, realize the self-increment after 1 second:

3.2 Trigger the Action asynchronous task and pass parameters:

Of course, when the component calls the function in the action, parameters can also be passed.

For example, there is a self-incrementing function that is executed 1 second after a click, but the amount of increment depends on the parameters passed in when calling:

definition:

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations:
   // Pass in parameters, the first one must be state, the second one is the passed in parameter // Function that increases n by itself addN(state,n){
      state.count+= n
    }
  },
   actions: {
    // There is a parameter n, which is passed to the addN function in mutation addNAsync(context,n) {
      setTimeout(()=>{
         context.commit('addN',n)
    },1000)
  }  
 }
})

When calling the corresponding component, you need to pass in parameters:

  methods: {
          btnAdd2() {
              //Call the dispatch function //Pass the parameter when triggering the action, which is 6, indicating an increase of 6
              this.$store.dispatch('addNAsync',6)
          }
      }

3.3 The second way to trigger an Action:

(1) Import the mapActions function from vuex as needed

import { mapActions } from 'vuex'

(2) Through the mapActions function just imported, map the required actions function to the methods method of the current component:

methods: {
   ...mapActions(['add','addN'])
}

In practice, realize the function requirement of Reduce.vue component to reduce by 1 after one second of clicking:

Define subAsync in actions as a self-decrementing function after one second:

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations:
    //Self-increment 1 function add(state){
      state.count++
    },
    // Function that decrements by 1 sub(state){
      state.count--
    }
  },
   actions: {
    addAsync(context) {
      setTimeout(()=>{
         context.commit('add')
    },1000)
  },
   subAsync(context) {
      setTimeout(()=>{
         context.commit('sub')
    },1000)
  }    
 }
})

Change the Reduce.vue code to implement the function:

<template>
    <div>
         <p>The count value is: {{count}}</p>
           <button @click="btnSub">-1</button>
    </div>
</template>
<script>
//Import import {mapState,mapActions} from 'vuex'
  export default{
      data() {
          return {
              
          }
      },
      computed: {
         ...mapState(['count'])
      },
      methods: {
          // Map the functions in Action...mapActions(['subAsync']),
          // To decrement, call the subAsync function btnSub(){
             this.subAsync()
          }
      }
  }
</script>

See the effect:

4. Getter:

Getter is used to process the data in the Store to form new data. And please note that it does not modify the data in the state.
①Getter can process the existing data in the Store to form new data, similar to the calculated properties of Vue.
②When the data in the Store changes, the data in the Getter will also change.

For example, there is a getter function that returns the current count+1:

export default new Vuex.Store({
  state: {
    count: 0
  },
 getters: {
    showNum(state){
      return `The current count value plus 1 is: ${state.count+1}`
    }
  }
})

4.1 The first way to trigger getters:

this.$store.getters.name

Display in App.vue component:

<template>
  <div id="app">
       <my-add></my-add>
       <p>--------------------</p>
       <my-reduce></my-reduce>
       <p>--------------------</p>
       <h3>{{this.$store.getters.showNum}}</h3>
  </div>
</template>

Effect:

4.2 The second way to trigger getters:

(1) Import the mapGetters function from vuex on demand

import { mapGetters } from 'vuex'

(2) Through the mapGetters function just imported, map the global data required by the current component to the computed properties of the current component:

computed: {
   ...mapGetters(['showNum'])
}

Or use it in App.vue:

<template>
  <div id="app">
       <my-add></my-add>
       <p>--------------------</p>
       <my-reduce></my-reduce>
       <p>--------------------</p>
       <h3>{{showNum}}</h3>
  </div>
</template>

<script>
// Import components import Add from './components/Add.vue'
import Reduce from './components/Reduce.vue'
// Import mapGetters function import {mapGetters} from 'vuex'
export default {
  name: 'App',
  data() {
    return {
      
    }
  },
  components:
    'my-add': Add,
    'my-reduce': Reduce
  },
  //Introduce getter
  computed: {
    ...mapGetters(['showNum'])
  }

}
</script>

See, the same effect:

6. Summary:

This concludes this article on the quick understanding and example application of Vuex state machine. For more relevant Vuex state machine application content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!