在vue-cli中使用vuex中的mapState

废话不说直接上代码

1.在vueX文件中写一个每次加等的方法

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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        sum: 0,
    },
    mutations: {
        cliadd(state, data) {
            state.sum += data
        }
    },
    actions: {
        add(context, data) {
            context.commit('cliadd', data)
        }
    },
    modules: {}
})

2.在页面中使用 vuex mapState

<template>
  <div>
    {{ sum }}
    <button @click="click">点击</button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
//	引入vuex中的sum变量 此时this.sum = this.$state.state.sum
 // computed: mapState(["sum"]),
 computed: {
 	...mapState({
        sum: state => state.sum
      })
   }
  methods: {
  //点击按钮触发vuex里的方法每次+20
    click() {
      this.$store.dispatch("add", 20);
    },
  },
};
</script>