开始学些vuex

20_脚手架/vue_code/23.src_求和案例_纯Vue版本/App.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <Count/>
+  </div>
+</template>
+
+<script>
+import Count from "@/components/Count.vue";
+
+export default {
+  name: "App",
+  components: {Count}
+}
+</script>

20_脚手架/vue_code/23.src_求和案例_纯Vue版本/components/Count.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <h1>当前求和为: {{sum}}</h1>
+    <select v-model.number="n">
+      <option value="1">1</option>
+      <option value="2">2</option>
+      <option value="3">3</option>
+    </select>
+    <button @click="add">+</button>
+    <button @click="sub">-</button>
+    <button @click="addOdd">当前求和为奇数再加</button>
+    <button @click="addWait">等一等再加</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Count",
+  data() {
+    return {
+      n: 1,
+      sum: 0
+    }
+  },
+  methods: {
+    add() {
+      this.sum += this.n
+    },
+    sub() {
+      this.sum -= this.n
+    },
+    addOdd() {
+      if (this.sum % 2) {
+        this.sum += this.n
+      }
+    },
+    addWait() {
+      setTimeout(()=>{
+        this.sum += this.n
+      }, 500)
+    }
+
+  }
+}
+</script>
+
+<style>
+button {margin-left: 5px}
+</style>

20_脚手架/vue_code/23.src_求和案例_纯Vue版本/main.js

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

20_脚手架/vue_code/package-lock.json

@@ -13,7 +13,8 @@
         "core-js": "^3.8.3",
         "pubsub-js": "^1.9.4",
         "vue": "^2.6.14",
-        "vue-resource": "^1.5.3"
+        "vue-resource": "^1.5.3",
+        "vuex": "^3.6.2"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -10460,6 +10461,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vuex": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "peerDependencies": {
+        "vue": "^2.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
@@ -19313,6 +19322,12 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "requires": {}
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",

20_脚手架/vue_code/package.json

@@ -13,7 +13,8 @@
     "core-js": "^3.8.3",
     "pubsub-js": "^1.9.4",
     "vue": "^2.6.14",
-    "vue-resource": "^1.5.3"
+    "vue-resource": "^1.5.3",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

20_脚手架/vue_code/src/components/Count.vue

@@ -1,20 +1,49 @@
 <template>
   <div>
-    <h1>当前求和为：？？？</h1>
-    <select>
+    <h1>当前求和为: {{sum}}</h1>
+    <select v-model.number="n">
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
     </select>
-    <button>+</button>
-    <button>-</button>
-    <button>当前求和为奇数再加</button>
-    <button>等一等再加</button>
+    <button @click="add">+</button>
+    <button @click="sub">-</button>
+    <button @click="addOdd">当前求和为奇数再加</button>
+    <button @click="addWait">等一等再加</button>
   </div>
 </template>
 
 <script>
 export default {
   name: "Count",
+  data() {
+    return {
+      n: 1,
+      sum: 0
+    }
+  },
+  methods: {
+    add() {
+      this.sum += this.n
+    },
+    sub() {
+      this.sum -= this.n
+    },
+    addOdd() {
+      if (this.sum % 2) {
+        this.sum += this.n
+      }
+    },
+    addWait() {
+      setTimeout(()=>{
+        this.sum += this.n
+      }, 500)
+    }
+
+  }
 }
 </script>
+
+<style>
+button {margin-left: 5px}
+</style>

20_脚手架/vue_code/src/main.js

@@ -4,12 +4,14 @@ import Vue from "vue";
 import App from "./App";
 // 引入插件
 import vueResource from "vue-resource";
+import Vuex from 'vuex'
 
 // 设置Vue
 Vue.config.productionTip = false
 
 // 使用插件
 Vue.use(vueResource)
+Vue.use(Vuex)
 
 // 实例化Vue
 new Vue({
@@ -17,6 +19,7 @@ new Vue({
         App
     },
     render: h => h(App),
+    store: {},
     beforeCreate() {
         Vue.prototype.$bus = this  // 安装全局事件总线
     }