The first map

Access XXX in store.state

const store = new Vuex.Store({
  state: {
    num: 0
  }
Copy the code

Other pages to visit

<template> <div id="user"> user <! --{{$store.state.num}}--> <! --{{zxd}}--> <! --{{countPlusLocalState}}--> {{num}} </div> </template> <script> import { mapState, mapMutations } from 'vuex'; Export default {// Computed: mapState({// First method to receive data // // HHH: state => state.num, // Second method to receive data // // ZXD: CountPlusLocalState (state){// return state.num + 100 //} //}), // The fourth way to receive data, computed:mapState(['num']) </script> <style scoped> </style>Copy the code

** JS is A single thread, synchronization means queuing, A event is finished to do B event, B event is finished to do C event asynchronous means not waiting, I can first execute B event, can also execute C event, rather than wait for a-B-C asynchronous events commonly used setTimeout(), setInterval() **

Synchronous:

Mutation (synchronous)

In VUEX, you can only call the mutation event by committing to change a value in the store. Instead of directly changing store.state. XXX for example

const store = new Vuex.Store({ state: { num: 0 isShow:fales }, mutations : { show(state){ state.isShow = true } add(state,n){ state.num+=n; }, del(state,n){ state.num-=n; }}Copy the code

Other pages to visit

<template> <div id="user"> {{num}} //commit: $this. codestore.com MIT ('mutations ', value) <! --<button @click="$store.commit('show')">add</button>--> <! --<button @click="$store.commit('add',10)">add</button>--> <! --<button @click="$store.commit('del',10)">del</button>--> <button @click="add(2)">add</button> <button @click="del(1)">del</button> </div> </template> <script> import { mapState, mapMutations } from 'vuex'; export default { computed:{ ... mapState(['num']), he(){ return 'hhehehe' } }, name: "user", methods:{ ... mapMutations(['show','add','del']) }, </script> <style scoped> </style>Copy the code

Asynchronous:

The Action (asynchronous)

By showsync(){context.com MIT (‘show ‘)}

For example,

const store = new Vuex.Store({
  state: {
    num: 0
    isShow:fales
  },
  mutations : {
  		show(state){
        	state.isShow = true
        }
    },
 actions: {
    showsync (context) {
      context.commit('show')
    }
Copy the code

Other pages to visit

<template> <div id="user"> {{num}} this.$store.dispatch('mutations method name ', value) $this.$store.dispatch('showsync'); this.$store.dispatch('showsync'); </div> </template> <script> import {mapState, mapMutations,mapActions} from 'vuex'; export default { computed:{ ... mapState(['num']), he(){ return 'hhehehe' } }, name: "user", methods:{ ... mapMutations(['show','add','del']), ... mapActions(['showsync']) }, </script> <style scoped> </style>Copy the code

If it is above this kind of situation, usually a synchronous request can solve, the actions are commonly used to solve the asynchronous, official here is well written, post links vuex.vuejs.org/zh/guide/ac…

In view of the small and medium-sized projects, the above several are adequate, the getter is equivalent to computing properties, difficulty is not great, not do discuss here, to see the document vuex.vuejs.org/zh/guide/ge…

There’s a little detail, there’s a notation in the document that I’ve been scratching my head about, and then I read someone else’s, and I get it

Module

If you’ve ever used vue-element-admin, make sure you know the Module in Vuex. Post a link to the documentation for the time being

Vuex.vuejs.org/zh/guide/mo…