Detailed explanation of the core concepts and basic usage of Vuex

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

npm install vuex --save

yarn add vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {}
})

import Vue from 'vue'
import store from './store'
new Vue({
  render: h => h(App),
  store
}).$mount('#app')

state: {
  num: 0
}

<div>{{ numAlias ​​}}</div>

import { mapState } from 'vuex'
export default {
  //Calculation function computed: mapState({
    // Passing the string parameter 'count' is equivalent to `state => state.count`
    numAlias: 'num', // Common key is a name you give yourself, value is the data you receive // ​​Arrow function can make the code more concise count: state => state.count,
    // In order to be able to use `this` to get the local state, you must use the regular function countPlusLocalState (state) {
      return state.count + this.localCount
    }
    //You can define other calculation functions}),
  //Or like this //Calculated function computed: {
    mapState(['count'])
  }
}

<div>{{ $store.state.count }}</div>

mutations:
	//increment custom method store parameter is store data, parameter parameter is received data, do not increment (state, parameter) {
        // Change state state.num++
    }
}

import { mapState, mapMutations } from 'vuex'
//Methods: {
	...mapMutations([
	    // mutations custom method name 'increment'
    ]),
    love() {
    	// Directly this calls this.increment('The data that needs to be passed is not needed')
        this.increment('Bin')
    }
}

methods: {
    love() {
    	// this.$store.commit('custom name', 'data passed may not be passed')
    	this.$store.commit('increment', 'data')
    }
}

mutations:
	//increment custom method store parameter is store data, parameter parameter is received data, do not increment (state, parameter) {
        // Change state state.num++
    }
},
actions: {
	//add custom method context is a parameter, you can treat it as an instance of vuex add(context) {
    	//You can use context.commit('method to be called in mutations')
    	context.commit('increment')
    }
}

import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions([
      'add', // Map `this.add()` to `this.$store.dispatch('add')`
      // `mapActions` also supports payloads:
      'add' // maps `this.add(amount)` to `this.$store.dispatch('add', amount)`
    ]),
    ...mapActions({
      add: 'add' // Map `this.add()` to `this.$store.dispatch('increment')`
    }),
    love() {
    	// Directly call this.add('The data that needs to be passed is not needed')
    	this.add(data)
    }
  }
}

methods: {
    love() {
    	// this.$store.dispatch('custom name', 'data passed may not be passed')
    	this.$store.dispatch('add', data)
    }
}

state: {
  num: 0
},
getters: {
    doneTodos: state => {
    	return state.num = 10
    }
}

<div>{{ doneTodos }}</div>

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  //Calculation function computed: {
  	...mapState(['count']),
  	...mapmapGetters(['doneTodos'])
  }
}

<div>{{ $store.getters.doneTodos }}</div>