State Management in Vue

Introduction: Centralized data management, one modification, multiple use, multiple components depend on the same state, the behavior from different components needs to change the same state, the ecological environment provides us with the official plug-in vuex

1.npm i vuex -S

2 import Vuex from "vuex" print console.log(Vuex) to get the things in Vuex, Vuex is an object

        There are store classes, map series functions, and communication tools

        1. The store class creates a state management instance and hangs it on the root of vue to control the data of the entire vue application

        2. Map series functions, communication tools: mapActions, mapMutations, mapGetters, mapState

3. Configuration (plug-in) Similar to routing configuration, create a plugins file with a vuex.js in it 

Vue plug-in, introduce vue, install the plug-in, create a vuex instance, there is a class Store in vuex, new creates an instance, exposes the state management instance, introduces it in main.js, and mounts it on vue

4. Role division: component, actions, mutations, state, getters 

5. The component component sends a request,

dispatch (instance method) ====> actions

mapActions(function, communication tool) ====> actions

mapMutations (function, communication tool) ====> mutations

commit (instance method, communication tool) ====> mutations
 

6.actions do synchronous and asynchronous business commit instance methods, communication tools

1. commit (instance method, communication tool) ====> mutations

7.mutations modify state, mutation state.key=value

8.state state {key:value}, data

9. getters (similar to externally placed computed properties) read processing status (data recalculation) find getters when you want to render

10. The component is ready to render in the component to get the data. When it wants to render, it will find the getters, and the getters will find the state and get it to the component.

1. mapGetters(function, communication tool) =====》 getters

2. mapState(function, communication tool) =====》state takes data directly

3. For example, state =====>state takes data { {$store.state.count}} takes data directly

Note:
Instance method (dispatch, commit): it belongs to the instance, so to call the instance method, you must first use the instance this.$store.commit

Function, communication tool (mapMutations, mapActions, mapGetters, mapState): function, call vuex object

 import {mapGetters,mapState,mapActions,mapMutations} from 'vuex'

methods:mapActions(['jia','jian','odd','redDate'])
 

 1.  import Vuex from 'vuex', Vuex is an object, the relevant members are as follows

member	use
Store	Class, constructs an instance of state management
mapActions	function, communication tool
mapMutations	function, communication tool
mapGetters	function, communication tool
mapState	function, communication tool

 2. Related members of the state management instance  this.$store

let store = new Vuex.Store({    //打造状态管理实例
    // 角色目录
    // state:{},// actions:{},// mutations:{},// getters:{}
    state,actions,mutations,getters
}) 
export default store  //将实例暴露出去

member	use
dispatch	instance method, communication tool
commit	instance method, communication tool
state	Attribute, get public data where all data is placed

Let's share a blog from Mr. Zilong who is not in Changshan hhh, the original address: Vue ---- State Management_hryztt123's Blog - CSDN Blog