Count.vue

<template>
  <div class="count">
    <h2>当前求和为:{{ sum }}</h2>
    <h3>当前求和放大10倍为：{{ bigSum }}</h3>
    <h3>我在{{ school }}学习{{ subject }}</h3>
    <!-- v-model.number收到的数值转换为number -->
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapState, mapActions } from "vuex";
export default {
  name: "TheCount",
  data() {
    return {
      n: 1, // 用户选择的数字
    };
  },
  computed: {
    // '...'是es6写法将数组里的每一项都列出来(属于state的项)
    ...mapState({
      sum: "sum",
      school: "school",
      subject: "subject",
    }),
    // ...mapState({
    //   "sum",
    //   "school",
    //   "subject",
    // }),
    // 借助mapGetters生成计算属性，从getters中读取数据。
    ...mapGetters(["bigSum"]),
    // ...mapGetters(['bigSum':'bigSum']),
  },
  methods: {
    // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations
    ...mapMutations({
      increment: "add",
      decrement: "minus",
    }),
    // ...mapMutations({
    //   "add",
    //   "minus",
    // }),

    // 借助mapActions生成对应的方法，方法中会调用commit去联系Actions
    ...mapActions({
      incrementOdd: "addObb",
      incrementWait: "addWait",
    }),
    // ...mapActions({
    //   "addObb",
    //   "addWait"
    // }),
  },

  mounted() {},
};
</script>

<style>
.count {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 300px;
  height: 400px;
}
button,
select,
h2,
h3 {
  width: 300px;
  height: 30px;
}
</style>

store/index.js

// 该文件用于创建Vuex中最为核心的store

// 引入Vue
import Vue from 'vue';
// 引入Vuex
import Vuex from 'vuex'; // npm i vuex@3引入vuex3
// 应用Vuex插件
Vue.use(Vuex);

// 准备actions——用于响应组件中的动作(用于发送网络请求)
const actions = {
    addObb(context, value) {
        if (context.state.sum % 2) context.dispatch('demo', value);
    },
    demo(context, value) {
        console.log('demo');
        context.commit('addObb', value);
    },
    addWait(context, value) {
        setTimeout(() => {
            context.commit('add', value);
        }, 1000)
    }
};
// 准备mutations——用于操作数据
const mutations = {
    add(state, value) {
        state.sum += value;
    },
    minus(state, value) {
        state.sum -= value;
    },
    addObb(state, value) {
        state.sum += value;
    },
    addWait(state, value) {
        state.sum += value;
    }
};
// 准备state——用于存储数据
const state = {
    sum: 0, //当前的和
    school: '广职院',
    subject: '前端'
};
// 准备getters——用于将state中的数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 10;
    }
}
// 创建store并暴露
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
});

App.vue

<template>
  <div id="app" class="align">
    <count />
  </div>
</template>

<script>
import Count from "./components/Count.vue";
export default {
  name: "App",
  components: { Count },
};
</script>

<style scoped>
</style>

main.js

import Vue from 'vue';
import App from './App.vue' // 引用App
import store from './store/index'; // 引入store
new Vue({
  // 创建vm并使用stroe
  render: h => h(App),
  store,
}).$mount('#app');