整理目录

20_脚手架/vue_code/24.src_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/App.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <Count/>
+  </div>
+</template>
+
+<script>
+import Count from "@/components/Count.vue";
+
+export default {
+  name: "App",
+  components: {Count},
+  mounted() {
+    console.log('App', this)
+  }
+}
+</script>

20_脚手架/vue_code/24.src_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/components/Count.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <h1>当前求和为: {{ sum }}</h1>
+    <h3>当前求和放大10倍后为: {{ bigSum }}</h3>
+    <h3>我在{{ school }}，学{{ subject }}</h3>
+    <select v-model.number="n">
+      <option value="1">1</option>
+      <option value="2">2</option>
+      <option value="3">3</option>
+    </select>
+    <button @click="add(n)">+</button>
+    <button @click="sub(n)">-</button>
+    <button @click="addOdd(n)">当前求和为奇数再加</button>
+    <button @click="addWait(n)">等一等再加</button>
+  </div>
+</template>
+
+<script>
+import {mapState, mapGetters, mapMutations, mapActions} from "vuex";
+
+export default {
+  name: "Count",
+  data() {
+    return {
+      n: 1
+    }
+  },
+  mounted() {
+    console.log('Count', this)
+  },
+
+  methods: {
+    ...mapMutations({add:'vuexAdd', sub:'vuexSub'}),  // 对象写法
+    // ...mapMutations(['vuexAdd', 'vuexSub']),   //数组写法
+
+    ...mapActions({addOdd:'vuexAddOdd', addWait:'vuexAddWait'}),
+  },
+
+  computed: {
+    ...mapState(['sum', 'school', 'subject']),  // 数组写法
+    // ...mapState({sum: 'sum', school: 'school', subject: 'subject'}),  // 对象写法
+
+    ...mapGetters({bigSum: 'bigSum'})
+  }
+}
+</script>
+
+<style>
+button {
+  margin-left: 5px
+}
+</style>

20_脚手架/vue_code/24.src_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/main.js

@@ -0,0 +1,26 @@
+// 引入Vue
+import Vue from "vue";
+// 引入App
+import App from "./App";
+// 引入插件
+import vueResource from "vue-resource";
+
+import store from './store'
+
+// 设置Vue
+Vue.config.productionTip = false
+
+// 使用插件
+Vue.use(vueResource)
+
+// 实例化Vue
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App),
+    store,
+    beforeCreate() {
+        Vue.prototype.$bus = this  // 安装全局事件总线
+    }
+}).$mount('#app')

20_脚手架/vue_code/24.src_求和案例_getters、mapState、mapGetters、mapActions、mapMulations/store/index.js

@@ -0,0 +1,53 @@
+// 用于创建vue中核心 store
+// 引入Vue
+import Vue from "vue";
+// 引入vuex
+import Vuex from 'vuex'
+
+// 应用Vuex插件
+Vue.use(Vuex)
+
+// 准备actions-用于响应组件中的动作,业务逻辑需要写到actions中
+const actions = {
+    vuexAddOdd(context, value) {
+        if (context.state.sum % 2) {
+            context.commit('vuexAdd', value)
+        }
+    },
+    vuexAddWait(context, value) {
+        setTimeout(() => {
+                context.commit('vuexAdd', value)
+            }, 1000
+        )
+    }
+}
+//准备mutations-用于操作数据
+const mutations = {
+    vuexAdd(state, value) {
+        state.sum += value
+    },
+    vuexSub(state, value) {
+        state.sum -= value
+    }
+}
+//准备state-用于存储数据
+const state = {
+    sum: 0,
+    school: '修仙学院',
+    subject: '修仙'
+}
+
+// getters 用于对state中的数据进行加工，类似用computed
+const getters = {
+    bigSum(state) {
+        return state.sum * 10
+    }
+}
+
+// 创建并导出store
+export default new Vuex.Store({
+    actions,
+    mutations,
+    state,
+    getters
+})