vuex

<!-- store.js -->
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  // 只有 mutations 中定义的函数，才有权利修改 state 中的数据
  mutations: {
    add(state) {
      // 不要在 mutations 函数中，执行异步操作
      state.count++
    },
    addN(state, step) {          //函数传参
      state.count += step
    }
  },
  actions: {
    addAsync(context) {
      setTimeout(() => {
        // 在 actions 中，不能直接修改 state 中的数据；
        // 必须通过 context.commit() 触发某个 mutation 才行
        context.commit('add')
      }, 1000)
    },
    addNAsync(context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000)
    }
  },
  getters: {         //包装数据   //Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。
    showNum(state) {              //Store 中数据发生变化，Getter 的数据也会跟着变化。
      return '当前最新的数量是【' + state.count + '】'
    }
  }
})

<!--组件调用修改公共数据数据方式一  Addition.vue -->
<template>
  <div>
    <!-- <h3>当前最新的count值为：{{$store.state.count}}</h3> -->
    <h3>{{$store.getters.showNum}}</h3>
    <button @click="btnHandler1">+1</button>     //组件点击事件改变公共数据
    <button @click="btnHandler2">+N</button>
    <button @click="btnHandler3">+1 Async</button>
    <button @click="btnHandler4">+N Async</button>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    btnHandler1() {
      this.$store.commit('add')
    },
    btnHandler2() {
      // commit 的作用，就是调用 某个 mutation 函数
      this.$store.commit('addN', 3)
    },
    // 异步地让 count 自增 +1
    btnHandler3() {
      // 这里的 dispatch 函数，专门用来触发 action
      this.$store.dispatch('addAsync')
    },
    btnHandler4() {
      this.$store.dispatch('addNAsync', 5)
    }
  }
}
</script>

<!--组件调用修改公共数据数据方式二  Addition.vue -->
<template>
    <div>
      <!-- <h3>当前最新的count值为：{{count}}</h3> -->
      <h3>{{showNum}}</h3>
      <button @click="btnHandler1">+1</button>
      <button @click="addN(3)">+N</button>
      <button @click="addAsync">+1 Async</button>
      <button @click="addNAsync(5)">+N Async</button>   //异步传参
    </div>
  </template>
  <script>
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'   
  export default {
    data() {
      return {}
    },
    computed: {
      ...mapState(['count']),       //相当于自己组件的数据
      ...mapGetters(['showNum'])
    },
    methods: {
      ...mapMutations(['add', 'addN']),   //映射声明,结构后,相当于自己的函数
      ...mapActions(['addAsync', 'addNAsync']),
      btnHandler1() {
        this.add()
      }
    }
  }
  </script>