What is Vuex?

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.

This is a brief introduction of VUex on the official website. It doesn’t matter if you are a little confused by this introduction. Next, I will explain some basic concepts of VUex

Vuex state management core

To learn how to use Vuex, let’s take a quick look at some of the core concepts in Vuex

State

Vuex is a warehouse with lots of objects in it. Where state is where the data source is stored, corresponding to data in a normal Vue object

data() {
    return {
        a: 'b',
        b: 'a'}}Copy the code

The data stored in state is reactive, and the Vue component reads data from the Store. If the data in the Store changes, the components that depend on that data are updated as well

You can think of status as the login status. Each page depends on this status to display information, but if one page logs out, the other pages will be affected

Getter

1. Getters can calculate State, which is the calculated property of Store

2. Getters can be reused across multiple components, although it is possible to compute properties within components

Mutation && Action

Action is similar to mutation

The difference is that an Action commits a Mutaion rather than a direct state change. Mutation is the performer that changes the state in the store. An Action can contain any asynchronous operation, whereas mutation can only be a synchronous operation

When should Vuex be used?

Using Vuex can be tedious and redundant if you don’t plan to develop large, single-page applications. That’s true — if your application is simple, you’d better not use Vuex. A simple Store pattern is all you need. However, if you need to build a medium to large single-page application, and you’re probably thinking about how to better manage state outside of components, Vuex would be a natural choice.

Common application scenarios are as follows:

  • Function of shopping city
  • The login status

.

Advantages of using Vuex

  • State between multiple nested components and sibling components is better managed and maintained
  • Caches some of the data sets that are currently being used remotely or locally by the request (it will destroy itself after refreshing)
  • With the second one, you can reduce the number of requests to the server and save resources. If you have enough users, each additional request is a lot of money for the company
  • For developers, if your project is complex enough and the team size is larger than one person, centralized data processing is more conducive to the stability and maintenance of the application

Let’s learn Vuex in practice

The case of Vuex

Let’s start by generating a Vue project through the Vue Cli scaffolding

$ vue create vuex-test
Copy the code

Select Vuex. If you do not select Vuex, we need to install it separately later, so please check it to save trouble

Once the project is created, there will be a store.js file in your project root directory SRC

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {

  },
  mutations: {

  },
  actions: {

  }
})
Copy the code

We see that the content structure of the store.js file looks like this, which was automatically generated when vue-CLI helped us to generate the project. Next, we will complete our small case step by step based on this template

Let’s masturbate store.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    INCREMENT (state, num) {
      state.count = state.count + num
    },
    DECREMENT (state, num) {
      state.count = state.count - num
    }
  },
  actions: {
    increment: ({ commit }) => commit('INCREMENT', 1),
    decrement: ({ commit }) => commit('DECREMENT', 1)}})Copy the code

In this file, we first declare a status count, then we write two methods in mutations to change the status of count, and then we write two methods in actions to call the methods in mutations, a very simple logic

To keep things simple, we do this directly from the template created by the Vue CLI

App.vue

<template>
  <div id="app">
    <span>App component: {{count}}</span>
    <br>
    <button @click="increment">+ 1</button>
    <button @click="decrement">- 1</button>

    <Home />
    <About />
  </div>

</template>

<script>
import { mapActions, mapState } from 'vuex'
import Home from './views/Home';
import About from './views/About';
export default {
  components: {
    Home,
    About
  },
  computed: {
    ...mapState({
      count: 'count'  
      
       // count: 'count', //
       // count: (state) => state.count, //})},methods: {
    ...mapActions({
      increment: 'increment'.decrement: 'decrement'}}})</script>

<style>
#app {
  width: 200px;
  height: 200px;
  margin: 200px auto;
}
</style>
Copy the code

Above we briefly draw the page and introduce the other two components. Above we see mapStat and mapActions. MapState is an auxiliary function of state, and mapActions is an auxiliary function of actions

  • mapStateMap this.count to store.state.count
  • mapMutationsMapState maps methods in a component to store.mit calls
  • mapActionsMap a component’s methods to a store.dispatch call
  • mapGetterYou simply map the getters in the store to local computed properties

The logic of the page is simple: click the button to add 1 to 1. When we click the button, increment and Decrement methods in Actions are triggered, respectively. This.$store.dispatch(‘ XXXXX ‘); this.$store.dispatch(‘ XXXXX ‘);

Mutation is triggered by mapActions to commit, changing the value of state

Home.vue

<template>
  <div class="home"> Home component: {{count}} </div> </template> <script> import {mapState} from'vuex'

exportdefault { computed: { ... mapState({ count:'count'
    })
  },
}
</script>
Copy the code

In this component we print out the value of the state count

About.vue

<template>
  <div class="about"> About component: {{count}} </div> </template> <script> import {mapState} from'vuex'

exportdefault { computed: { ... mapState({ count:'count'
    })
  },
}
</script>
Copy the code

In this component we print out the value of the state count

Have you seen that we change the count value in App component by method, the other two components also change, this is a simple example, I found that I really can’t write articles, thank you very much…

Personal blog