Vue data communication

  1. Parent and child components V-bind V-ON
  2. EventBus registers the global Vue to register events with the instance object of the Vue

  3. e m i t emit     on

Vuex

Global state Management

  1. Store stores data this.$store.state accesses mapState mapped to the component in computed

    It is not recommended to modify data directly in the component using $store

  2. Mutations simultaneous change

    Modify store data: Modify data through mutations, to prevent large amount of logic engineering to be changed again after multiple components modify state

    1. Triggered by COMMIT can also be triggered by mapMutations mapping into Methods
    2. Mutations the first parameter state the second parameter does not have the third parameter is also undefined
    3. Use this. codestore.com MIT (‘mutations registered name ‘, ‘delivered parameters ‘)

  3. Actions Asynchronously modify the methods in the Actions. The first parameter is context, which is used to call the commit method, and the second parameter is passed, which means that the mutations are used to change the state of the actions

    1. Triggered by Dispatch can also be triggered by mapping mapActions to Methods
    2. Mutations the first parameter state the second parameter does not have the third parameter is also undefined
    3. When used this.$store.dispatch(‘ Actions registered name ‘, ‘parameters passed ‘)

  4. Getter

    1. Process and package data without modifying source data
    2. The first parameter of getters, state, returns the result of processing state
    3. Use this.$store.’ method of getters’ or mapGetters to map to computed
import Vue from "vue"; import Vuex from 'vuex'; Vue.use(Vuex) export default new Vuex.Store({ state: { count: 0 }, mutations: { ADD(state) { state.count++ }, SUB(state) { state.count-- }, ADDN(state, step) { state.count += step }, SUBN(state, step) { state.count -= step } }, actions: { addAsync(context) { setTimeout(() => { context.commit('ADD') }, 1000); }, addNAsync(context, step) { setTimeout(() => { context.commit('ADDN', step) }, 1000); }, subAsync(context) { setTimeout(() => { context.commit('SUB') }, 1000); }, subNAsync(context, step) { setTimeout(() => { context.commit('SUBN', step) }, 1000); }, getters: {showNumber: state => {return 'current count is ${state.count}'}}})Copy the code
<template>
  <div>
    <h3>{{$store.getters.showNumber}}</h3>
    <button @click="add">+1</button>
    <button @click="addN">+N</button>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    add() {
    //   this.$store.commit("ADD");
    this.$store.dispatch('addAsync')
    },
    addN() {
    //   this.$store.commit("ADDN", 3);
    this.$store.dispatch('addNAsync', 3)
    },
  },
};
</script>
Copy the code
<template> <div> <! - < h3 > the current count {{count}} < / h3 > -- > < h3 > {{showNumber}} < / h3 > < button @ click = "sub" > 1 < / button > < button @click="subn">-1</button> </div> </template> <script> import { mapState, mapMutations, mapActions, mapGetters } from "vuex"; export default { data() { return {}; }, methods: { ... mapMutations(["SUB", "SUBN"]), ... mapActions(["subAsync", "subNAsync"]), sub() { // this.SUB() this.subAsync(); }, subn() { // this.SUBN(3) this.subNAsync(5); }, }, computed: { ... mapState(["count"]), ... mapGetters(["showNumber"]), }, }; </script>Copy the code