Understanding Vuex in one article

Overview

Vuex is a state management mode developed specifically for Vue.js applications (official website address: https://vuex.vuejs.org/zh/). 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.

In plain words: Vuex is a state management mode, which can be simply understood as a global object. Then we can modify the properties or add methods in this global object, but we cannot modify it in the direct assignment form of traditional JS. We must modify it according to the rules provided by Vuex.

The existence of Vuex is used to solve the problem of value transmission between components. To put it bluntly, it is to see the benefits brought to us by the troubles and drawbacks of value transmission between our traditional Vue parent-child components; this is clearly stated on the official website:

Tip: This article will use vuex in the form of module import and export. This article is a little long. I hope you will read it patiently. Of course, if you have the conditions, the effect will be better if you follow it!

Vuex four major objects

They are state, mutations, getters, and actions;

state: The data source in Vuex. All the public data we need is stored here. It can be simply understood as a transparent warehouse. The data source in this warehouse can be accessed through the this.$store.state. variable name;

mutations: mutations are equivalent to the key of this warehouse. Only by submitting mutations can the data source be modified. In other words, if you want to change the data in this warehouse, you can only modify it through mutations (this.$store.commit("method name"));

Getters: getters are similar to computed properties in vue. The return value of getters will change according to the state modification of the value dependent in state. If the value in the state that getters depend on has not changed, the cache is read directly. If there is a change, corresponding changes will also occur here, which can be used to monitor the change of state value. The getters here can be understood as the security guard of the state warehouse. If the data of the state changes, the security guard will take corresponding measures to make corresponding changes. If there is no change, nothing will happen and you will continue to eat and wait for death (hahaha, I don’t know if the metaphor is appropriate, but this is the meaning. Just understand it, don’t argue)

Actions: Actions are very similar to mutations, but mutations are officially only allowed to be operated synchronously, while actions can be operated asynchronously. That is to say, we need to perform asynchronous operations in actions, and actions submit mutations instead of directly modifying the state. That is to say, to enter the warehouse to modify data, you must first get the key before you can modify it. Therefore, actions are submitted to mutations and then execute the mutations method:

Usage of state

First, we create a new project and build the vue environment. We will not go into details here. After all, this article is about vuex. First install vuex in the project:

Install vuex command: npm install vuex --save

After installing vuex, we create a new vuex folder in the src directory, and create a new store.js file in the vuex folder:

store.js:

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


Vue.use(Vuex);
const state = {
  number:1
}

export default new Vuex.Store({
  state,
})

Then we reference store.js in main.js and add the store object when instantiating the object

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
//Reference store.js
import store from './vuex/store'

Vue.config.productionTip = false


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
//Add the store object store when instantiating,
  components: { App },
  template: '<App/>'
})

Then modify our App.vue file

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
// Add data to the view layer for easy observation<p>{{this.$store.state.number}}</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

From the above code, we can see that we added a p tag in App.vue. Vuex stipulates that if we need to read the data in vuex, that is, the data source warehouse of state, we must access it through the variable name this.$store.state.

Usage of mutations

If we need to modify the data source in vuex, we can modify it by submitting mutations;

First we need to add a button to our view layer to control:

App.js

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>{{$store.state.number}}</p>
    //Add a button to trigger an event to modify the data source <button @click="add">button</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    add(){
    //To modify the data source, you need to use the method specified by vuex this.$store.commit('addFunction');
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
    

Then modify our store.js:

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


Vue.use(Vuex);
const state = {
  number:1
}

//Add mutations object, the state parameter can get the above state
const mutations = {
  addFunction(state){
    return state.number+=1;
  }
}

//Be sure to add it to the instance here, otherwise an error will be reported export default new Vuex.Store({
  state,
  mutations
})

We can see intuitively that mutations are submitted to modify the data source through this.$store.commit('method name'). Of course, our mutations can also receive parameters. The first parameter is the method name of the mutation, and the second parameter is the parameter that the mutation needs to receive. In this way, our mutations become more flexible.

Usage of getters

Getters are similar to the computer usage of Vue. They can monitor data changes in the state data source warehouse. If the data that getters depend on state changes, the data that getters depend on changes, and the state will also change.

First we can add the following code in store.js:

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


Vue.use(Vuex);
const state = {
  number:1
}

const getters = {
    //Triggering state through method is the state object above, which can read the value of state addFunction(state){
    return state.number++;
  }
}
export default new Vuex.Store({
  state,
//Be sure to remember to add object getters when instantiating
})

We can change the view in App.vue like this:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>Page value: {{$store.state.number}}</p>
    //Add a tag to compare with the value of the page<p>The value of my getters: {{$store.getters.addFunction}}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Through the above code and the view layer, we can clearly see that when we operate getters, the addFunction method of getters is triggered. The addFunction method will change the value of state.number. At this time, the value of number is already 2, so the value will be displayed on the page as 2. Because ++ is at the end, the value of getters at this time is 1. That is to say, when the value of state.number that getters depend on changes in getters, state.number will change. If state.number does not change, getters will read the cache first.

Usage of actions

The actions object mainly performs asynchronous operations, which are similar to mutations. The difference is that actions change data by submitting mutations instead of directly changing the data state.

First we can change the code in store.js:

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


Vue.use(Vuex);
const state = {
  number:1
}
const mutations = {
  addFunction(state){
    return state.number++;
  }
}
const getters = {
  addFunction(state){
    return state.number++;
  }
}
//context is an object with the same properties and methods as a store instance const actions = {
  addFunction(context){
    context.commit("addFunction");
  }
}
export default new Vuex.Store({
  state,
  mutations,
  getters,
//Remember to add actions when instantiating
})

The code in App.vue is modified as follows:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>Page value: {{$store.state.number}}</p>
     <button @click="add">Button</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    add(){
//In actions, use this.$store.dispatch to submit mutations for modification this.$store.dispatch("addFunction")
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Applicable scenarios of Vuex

In project development, there may be a lot of data or parameters that we may need to read or modify multiple times, such as shopping carts and other similar functions. At this time, we can use vuex to implement it; after all, vuex is just a state management mode. The state management mode provides us with convenience, but it is not necessary, because what state management can do can also be achieved through other channels and methods. In fact, I think vuex is a bit similar to localStorage, both of which are used to store and modify data in order to solve the problem of cross-page data loss;

The above is an article to easily understand the details of Vuex. For more information about Vuex, please pay attention to other related articles on 123WORDPRESS.COM!