Vue 数据通信

1. 父子组件 v-bind v-on
2. EventBus 注册全局Vue 将事件注册到Vue的实例对象上去
3. $emit$on

Vuex

全局状态管理

1. store 存储数据 this.$store.state 访问 mapState 映射到组件的computed中

   不推荐直接在组件中 直接使用$store 修改数据

2. mutations 同步更改

   修改store数据： 通过mutations来修改数据,以防多个组件修改state后,再次更改逻辑工程量大

   1. 由commit触发 也可由 mapMutations映射到methods中触发
   2. mutations 第一个参数state 第二个传参 没有第三个参数传了也是undefined
   3. 使用时 this.$store.commit('mutations注册的名字', '传递的参数')

3. actions 异步修改 actions 中的方法第一个参数为context 用来调用commit方法 第二个参数为传参 也就是说actions 最后还是用mutations来修改状态state的

   1. 由dispatch触发 也可由 mapActions映射到methods中触发
   2. mutations 第一个参数state 第二个传参 没有第三个参数传了也是undefined
   3. 使用时 this.$store.dispatch('actions注册的名字', '传递的参数')

4. Getter

   1. 加工包装数据,并不修改源数据
   2. getters 第一个参数 state 返回对state的加工结果
   3. 使用时 this.$store.'getters的方法' 或者mapGetters映射到 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 `当前的count是${state.count}`
        }
    }
})

<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>

<template>
  <div>
    <!-- <h3>当前的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>