【Vuex实战】实现点击按钮数字自增、自减、异步自增、异步自减

1. 目录结构

2. store/index.js代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0,
  },
  getters: {},
  mutations: {
    // 自增1
    add(state) {
      state.count++
    },
    // 自增N
    addN(state, step) {
      state.count += step
    },
    sub(state) {
      state.count--
    },
    subN(state, step) {
      state.count -= step
    },
  },
  actions: {
    // 异步自增1
    addAsync(context) {
      // 在 actions 中，不能直接修改 state 中的数据
      // 必须通过 context.commit() 触发某个 mutation 才行
      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: {
    showNum: (state) => {
      return '当前最新的数量是：【' + state.count + '】'
    },
  },
  modules: {},
})

3. Add.vue组件代码

<template>
  <div>
    <!-- <h3>当前最新的count值为：{{ $store.state.count}}</h3> -->
    <h3>{{ $store.getters.showNum }}</h3>
    <button @click="add">+1</button>
    <button @click="addN">+N</button>
    <button @click="add_Async">+1 Async</button>
    <button @click="addN_Async">+N Async</button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    // 自增1
    add() {
      this.$store.commit('add')
    },
    // 自增N
    addN() {
      // commit作用：调用 某个 mutation 函数
      this.$store.commit('addN', 3)
    },
    add_Async() {
      // dispatch 函数，专门用来触发 action
      this.$store.dispatch('addAsync')
    },
    addN_Async() {
      this.$store.dispatch('addNAsync', 3)
    },
  },
}
</script>

<style></style>

4. Sub.vue组件代码

<template>
  <div>
    <!-- <h3>当前最新的count值为：{{ count }}</h3> -->
    <h3>{{ showNum }}</h3>
    <button @click="subHandle">-1</button>
    <button @click="subNHandle">-N</button>
    <button @click="subAsync">-1 Async</button>
    <button @click="subNAsync(3)">-N Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNum']),
  },
  methods: {
    ...mapMutations(['sub', 'subN']),
    ...mapActions(['subAsync', 'subNAsync']),
    subHandle() {
      this.sub()
    },
    subNHandle() {
      this.subN(3)
    },
  },
}
</script>

<style></style>

5. App.vue根组件代码

<template>
  <div id="app">
    <my-add></my-add>
    <p>----------------------------------------------</p>
    <my-sub></my-sub>
  </div>
</template>

<script>
import Add from './components/Add.vue'
import Sub from './components/Sub.vue'

export default {
  name: 'App',
  components: {
    'my-add': Add,
    'my-sub': Sub,
  }
}
</script>

<style lang="less">
#app {

}
</style>

6. 效果

---

参考： 黑马vuex视频