Vuex, the state management tool in Vue

Vuex is a state management mode developed specifically for Vue.js applications

Introduction

The core of every Vuex application is the store. "Store" is basically a container that contains most of the state in your application.

Vuex differs from pure global objects in the following two points:

1. Vuex's state storage is responsive. When the Vue component reads the state from the store, if the state in the store changes, the corresponding component will be updated efficiently accordingly
2. The state in the store cannot be changed directly. The state defined in the mutation must be changed by calling the method defined in the mutation in Vuex, so that we can know every state change

The meaning of its existence is to enable all components in Vue to communicate data

Use environment

If we use the same variable in multiple components in vue, and the variable in one component changes the variable in other components, we also need to change this time we can use Vuex to store this variable

Five cores of Vuex

state: store the various states of the store
mutation: change the state of the store only through the mutation method
action: asynchronous operation method
module: modular
getter: equivalent to calculating attributes, filtering out
the use of some values state

Use of Vuex

1. Storage and retrieval

const store = new Vuex.Store({
    //存放状态信息
    state: {
        counter:1000,
    },
}
 //拿到counter的值
<h2>{
   
   {$store.state.counter}}</h2>

2. Synchronous modification

mutations: {
        //方法,改state提交mutation
        //mutation响应规则
        //mutation无法进行异步更新
        increment(state) {
            state.counter++

        },
}  
  //在方法中提交mutation
methods: {
    addition(){
      //提交store的信息
      this.$store.commit('increment')
      }
}

3. Asynchronous modification

const store = new Vuex.Store({
    //存放状态信息
    state: {
        Info: {
            name : 'kobe',
            age:20,
            height : 1.98
       }
    },
mutations: {
        increment(state) {
            state.counter++
        },
}  
actions:{
        //进行异步操作
        //context上下文
        //异步可以用setTimeout
        aupdateInfo(context){
            setTimeout(() =>{
                context.commit('updateInfo')
            },1000)
        }
}
    methods: {
        updateInfo() {
      // this.$store.commit('updateInfo')
      // dispatch：含有异步操作，例如向后台提交数据，写法:this.$store.dispatch('action方法名',值)
//commit：同步操作，写法：this.$store.commit('mutations方法名',值)
      this.$store.dispatch('aupdateInfo')
      },
  }
}

• In fact, we just used dispatch to call the method defined in mutations again.

4. Use of module

// 在大量使用Vuex时为了避免代码过于臃肿 为了方便后期维护和避免命名冲突
// 在modules中划分，让每一个分离出去的State都有自己的getters，mutations，actions等
modules :{
        a:modulesA
    }
const modulesA = {
    state : {
        name : 'zhangsan'
    }
    mutation： {}，
    getter： {}

}

Vuex installation and configuration

1. Install Vuex

npm i vuex --save

2. Quoting Vuex

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

3. Create a warehouse store

 //创建一个 store
 const store = new Vuex.Store({});

or

We selected Vuex when creating Vue scaffolding to make it come with Vuex template