admin

12_vuecli/myapp/package.json

@@ -10,7 +10,8 @@
   "dependencies": {
     "core-js": "^3.8.3",
     "vue": "^2.6.14",
-    "vue-router": "^3.5.1"
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -18,6 +19,7 @@
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",

12_vuecli/myapp/src/components/AddCompButton.vue

@@ -8,7 +8,7 @@
 export default {
     methods: {
         childAddFun(){
-            this.$emit('parentHandle')
+            this.$emit('parentHandle',10)
         }
     },
 }

12_vuecli/myapp/src/components/TestComp1.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="comp1">
+        <h1>状态值stateNum:{{$store.state.stateNum}}</h1>
         <h1>自定义组件一</h1>
         {{str}}
         <h1>{{compName}}</h1>
@@ -16,6 +17,7 @@ export default {
     },
     methods: {
         passVal(){
+            // 如果子组件想把数据传递给父组件，需要使用$emit方法 接受两个参数 第一个参数是自定义事件名称，第二个参数开始是传递的值
             this.$emit('parentHandle',this.comVal);
         }
     },

12_vuecli/myapp/src/main.js

@@ -1,10 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+import store from './store'
 
 Vue.config.productionTip = false
 
 new Vue({
   router,
+  store,
   render: h => h(App)
 }).$mount('#app')

12_vuecli/myapp/src/store/index.js

@@ -0,0 +1,22 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    stateNum:100,
+    stateStr:'hello world'
+  },
+  getters: {
+  },
+  mutations: {
+    stateNumAdd(state,i){
+      state.stateNum+=i
+    }
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

12_vuecli/myapp/src/views/AboutView.vue

@@ -1,5 +1,30 @@
 <template>
   <div class="about">
     <h1>This is an about page</h1>
+    <h1>{{ $store.state.stateNum }}</h1>
+    <h1>当前页面状态值:{{thisVal}}</h1>
+    <h1>mapState的值:{{stateNum}}</h1>
+    <h1>mapStateStr的值：{{stateStr}}</h1>
+    <button @click="changeFun">changeState</button>
   </div>
 </template>
+<script>
+import {mapState} from 'vuex';
+export default {
+  methods: {
+    changeFun(){
+      console.log(this.$store.state.stateNum);
+      // this.$store 可以获取当前vuex对象的
+      // 通过commit方法调用store/index.js中mutations中方法
+      // 接收多个参数，第一个是mutations中方法名，第二个开始是传入的参数
+      this.$store.commit("stateNumAdd",10);
+    }
+  },
+  computed:{
+    ...mapState(['stateNum','stateStr']),
+    thisVal(){
+      return this.$store.state.stateNum
+    }
+  }
+}
+</script>

12_vuecli/myapp/src/views/AddComp.vue

@@ -16,8 +16,8 @@ export default {
         }
     },
     methods: {
-        parentAddFun(){
-            this.num++;
+        parentAddFun(i){
+            this.num+=i;
         }
     },
     components:{