admin

10_vuecli/helloworld/src/App.vue

@@ -30,6 +30,9 @@
         <div class="nav-item" @click="goPage">
           编程式导航
         </div>
+        <router-link to="/pagefour">
+          <div class="nav-item">页面四</div>
+        </router-link>
       </nav>
       <!-- router-view 就是路由出口 -->
        <div class="content" >

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

@@ -73,7 +73,13 @@ const routes = [
     redirect:"/",
     // 别名 访问 /backhome 也会跳转到 / 首页
     alias:"/backhome"
-  },{
+  },
+  {
+    path:"/pagefour",
+    name:"pagefour",
+    component: () => import("../views/PageFour.vue")
+  },
+  {
     // 实现 404 页面
     // 通配符路由 必须写在最后面
     // 当访问的路径 都没有匹配到其他路由的时候 就会跳转到通配符路由

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

@@ -4,13 +4,36 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
+  // 定义属性(可以理解为定义一个全局变量)
   state: {
+    count:1,
+    x:10,
+    y:20,
+    z:30
   },
+  // 定义计算属性(类似于vue中的计算属性computed)
   getters: {
+    getCount(state){
+      return state.count+100;
+    }
   },
+  // 定义方法(可以对state进行操作)
   mutations: {
+    // 定义一个方法 用来修改 count 值
+    countAdd(state,i){
+      // 会接受一个参数 就是 state 对象
+      state.count += i;
+    }
   },
+  // 定义异步方法(可以对state进行操作 异步修改state中的值)
   actions: {
+    actionFun(context,k){
+      // 异步修改 count 值
+      setTimeout(()=>{
+        // 调用 commit 方法 触发 mutation 方法
+        context.commit("countAdd",k);
+      },1000)
+    }
   },
   modules: {
   }

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

@@ -1,6 +1,8 @@
 <template>
   <div class="about">
     <h1>This is an about page</h1>
+    <!-- 从 vuex 中获取 count 值 -->
+    <h1>当前count值:{{ $store.state.count }}</h1>
   </div>
 </template>
 <script>

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

@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <h1>我是页面四</h1>
+        <!-- 从 vuex 中获取 count 值 -->
+         <!-- $store 是 vuex 实例 -->
+          <!-- $store.state.定义的属性名 -->
+           
+        <h1>{{ x }},{{ y }},{{ z }},{{ count }}</h1>
+        <h1>当前count值:{{ $store.state.count }}</h1>
+        <h1>当前count值(简化):{{ countNum }}</h1>
+        <!-- <h1>getter中的值:{{ $store.getters.getCount }}</h1> -->
+         <h1>getter中的值(简化):{{ getCount }}</h1>
+        <div>
+            <button @click="changeCount">修改count</button>
+            <button @click="asyncChangeCount">异步修改count</button>
+        </div>
+    </div>
+</template>
+<script>
+    // mapState 这里边式全部的vuex 中的属性
+    // mapMutations 这里边式全部的vuex 中的mutation方法
+    // mapGetters 这里边式全部的vuex 中的getter属性
+    import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
+    export default{
+        name:"PageFour",
+        methods:{
+            // 利用 mapMutations 方法 简化对 vuex 中 mutation 方法的调用
+            // mapMutations 内部传递一个数组 数组中写入要引用的 vuex 中的 mutation 方法名
+            ...mapMutations(["countAdd"]),
+            ...mapActions(["actionFun"]),
+            changeCount(){
+                // 通过 commit 方法 调用 mutations 中的方法
+                // 第一个参数 就是 mutations 中的方法名
+                // 从第二个参数开始 就是 传递给 mutations 中的方法的参数
+                // this.$store.commit("countAdd",10);
+                this.countAdd(5);
+            },
+            asyncChangeCount(){
+                // 调用 vuex 中的 action 方法 通过 dispatch 方法调用
+                // this.$store.dispatch("actionFun",50);
+                this.actionFun(50);
+            }
+        },
+        created(){
+            // 在js中引用vuex 中的值 前面需要添加this
+            console.log(this.$store.state.count);
+        },
+        computed:{
+            // 利用 mapState 方法 简化对 vuex 中值的引用
+            // mapState 内部传递一个数组 数组中写入要引用的 vuex 中的属性名
+            ...mapState(["count","x","y","z"]),
+            // 利用 mapGetters 方法 简化对 vuex 中 getter 属性的调用
+            // mapGetters 内部传递一个数组 数组中写入要引用的 vuex 中的 getter 属性名
+            ...mapGetters(["getCount"]),
+            countNum(){
+                // 可以利用计算属性 简化对 vuex 中值的引用
+                return this.$store.state.count;
+            }
+        }
+    }
+</script>