admin

10_vuecli/helloworld/src/App.vue

@@ -10,7 +10,8 @@
       <router-link to="/backhome">返回首页</router-link> |
       <!-- 别名 -->
       <router-link to="/info/200">Info</router-link>｜
-      <router-link to="/pagetwo">页面二</router-link>
+      <router-link to="/pagetwo">页面二</router-link>|
+      <router-link to="/pagethree">页面三</router-link>|
 
     </nav>
     <!-- transition 过渡动画 -->

10_vuecli/helloworld/src/router/index.js

@@ -55,6 +55,11 @@ const routes = [
     path:"/pagetwo",
     name:"pagetwo",
     component: () => import('../views/PageTwo.vue')
+  },
+  {
+    path:"/pagethree",
+    name:"pagethree",
+    component: () => import('../views/PageThree.vue')
   }
 ]
 

10_vuecli/helloworld/src/store/index.js

@@ -4,14 +4,41 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
+  // 状态管理 state用来存储全局的状态 （全局变量）
   state: {
+    count: 0
   },
+  // getters 类似于 computed 计算属性 
+  // 只要相关联的全局状态值发生了变化 计算属性的值也会发生改变
   getters: {
+    valTest(state) {
+      if (state.count > 500) {
+        return '全局状态count的值大于500';
+      }
+      return 'count可以继续增加';
+    }
   },
+  // mutations用来改变全局的状态值 （全局变量）
   mutations: {
+    // 改变全局状态count的值
+    countChange(state, i) {
+      // state状态值会直接传递给mutations方法
+      state.count += i;
+    }
   },
+  // actions 用来提交mutations方法 用来异步处理state状态值的变化
   actions: {
+    // 异步处理state状态值的变化
+    countChangeAsync({ commit }, i) {
+      // commit 方法用来提交mutations方法
+      // commit 方法中可以传递参数 第一个参数是mutations方法的名称 从第二个参数开始是传递给mutations方法的参数
+      setTimeout(() => {
+        commit('countChange', i);
+      }, 2000)
+    }
   },
   modules: {
+
+    
   }
 })

10_vuecli/helloworld/src/views/HomeView.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="home">
+    <!-- 获取全局状态count的值  $store.state.状态名  -->
+    <h1>全局状态count的值为：{{ $store.state.count }}</h1>
     <img alt="Vue logo" src="../assets/logo.png">
     <HelloWorld msg="Welcome to Your Vue.js App"/>
   </div>

10_vuecli/helloworld/src/views/PageThree.vue

@@ -0,0 +1,46 @@
+<template>
+    <div class="pagethree">
+        <h1>PageThree</h1>
+        <!-- 获取全局状态count的值  $store.state.状态名  -->
+        <!-- <h1>全局状态count的值为：{{ $store.state.count }}</h1> -->
+        <h1>全局状态count的值为：{{ count }}</h1>
+        <!-- getters 可以用来获取全局状态的值  $store.getters.计算属性名 -->
+        <!-- <h1>{{ $store.getters.valTest }}</h1> -->
+        <h1>{{ valTest }}</h1>
+        <button @click="changeCount">改变全局状态count的值</button>
+
+    </div>
+</template>
+<script>
+import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
+export default {
+    name: 'PageThree',
+    methods: {
+        changeCount() {
+            // 改变全局状态count的值
+            // commit 方法用来提交mutations方法
+            // commit 方法中可以传递参数 第一个参数是mutations方法的名称 从第二个参数开始是传递给mutations方法的参数
+            // this.$store.commit('countChange',100);
+            // this.countChange(100);
+            // actions 方法用来提交mutations方法 用来异步处理state状态值的变化
+            // this.$store.dispatch('countChangeAsync',100);
+            this.countChangeAsync(100);
+        },
+        ...mapMutations(['countChange']),
+        ...mapActions(['countChangeAsync']),
+    },
+    mounted() {
+        // 在js中使用 vuex 中的属性需要添加this
+        // 组件挂载完成 调用全局状态count 属性
+        console.log(this.$store.state.count);
+        // 组件挂载完成 调用全局状态的计算属性
+        console.log(this.$store.getters.valTest);
+    },
+    computed: {
+        // mapState 方法可以将vuex 中的状态映射到组件的计算属性中 返回指定的状态值
+        ...mapState(['count']),
+        // mapGetters 方法可以将vuex 中的计算属性映射到组件的计算属性中 返回指定的计算属性值
+        ...mapGetters(['valTest']),
+    }
+}
+</script>