搭建vuex环境

20_脚手架/vue_code/package.json

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

20_脚手架/vue_code/src/App.vue

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

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

@@ -22,6 +22,9 @@ export default {
       sum: 0
     }
   },
+  mounted() {
+    console.log('Count', this)
+  },
   methods: {
     add() {
       this.sum += this.n

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

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

20_脚手架/vue_code/src/store/index.js

@@ -0,0 +1,22 @@
+// 用于创建vue中核心 store
+// 引入Vue
+import Vue from "vue";
+// 引入vuex
+import Vuex from 'vuex'
+
+// 应用Vuex插件
+Vue.use(Vuex)
+
+// 准备actions-用于响应组件中的动作
+const actions = {}
+//准备mutations-用于操作数据
+const mutations = {}
+//准备state-用于存储数据
+const state = {}
+
+// 创建并导出store
+export default new Vuex.Store({
+    actions,
+    mutations,
+    state,
+})