day:34

day32/project/src/components/vase2.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <button @click="goToNew">跳转</button>
     <h1>第二个页面</h1>
     <h3 :style="{opacity}">北京欢迎你</h3>
     <ul>
@@ -42,6 +43,12 @@ export default {
     deactivated() {
         console.log("组件被销毁")
         clearInterval(this.timer)
+    },
+    methods:{
+        goToNew() {
+            // 进行路由跳转
+            this.$router.push("/new");
+        }
     }
 }
 </script>

day32/project/src/router/index.js

@@ -43,15 +43,15 @@ const routes = [
         path:'vase2',
         component:()=>import("../components/vase2.vue"),
         meta:{title:"第二页"},
-        beforeEnter: (to, from, next) => {
-          // ...
-          console.log("开始独享")
-          if(localStorage.getItem("bb")==="222") {
-            next();
-          } else {
-            alert("人员信息不存在")
-          }
-        }
+        // beforeEnter: (to, from, next) => {
+        //   // ...
+        //   console.log("开始独享")
+        //   if(localStorage.getItem("bb")==="222") {
+        //     next();
+        //   } else {
+        //     alert("人员信息不存在")
+        //   }
+        // }
       },
     ]
   },

day32/project/src/store/index.js

@@ -3,15 +3,53 @@ import Vuex from 'vuex'
 
 Vue.use(Vuex)
 
+// VueX是一个状态管理库 把公用的内容存放到一起
+// 小的项目很少会用到vuex
 export default new Vuex.Store({
+  // 存储数据
   state: {
+    weather:"晴天",
+    address:"哈尔滨",
+    count: 1
   },
+  // 相当于computed
   getters: {
+    newCount(state) {
+      return state.count * 2
+    }
   },
+  // 同步操作
   mutations: {
+    addCount(state,num) {
+     state.count = state.count + num
+    },
+    reduce(state) {
+      state.count--
+    }
   },
+  // 异步操作
   actions: {
+    asyncAdd(context) {
+      setTimeout(()=>{
+        context.commit("reduce")
+      },1000)
+    }
   },
+  // 模块化
   modules: {
+     school: {
+      namespaced:true,
+      state:{},
+      getter:{}
+    },
+     car: {
+      state:{},
+      getter:{}
+    },
+    shop:{
+      mutations:{},
+      actions:{}
+    }
+
   }
 })

day32/project/src/views/New.vue

@@ -1,10 +1,110 @@
 <template>
-  <div>新内容</div>
+  <div>
+    <h1>新内容</h1>
+    <!-- 
+      State
+      1.在标签中调用state
+      $store.state.xxxx
+      2.在方法中调用
+      this.$store.state.xxx
+      3.辅助函数
+      mapState
+      必须要引入 
+      使用：...mapState(["xxx"],["xxx"],....)
+     -->
+     <!-- 
+      Mutations 同步
+      1.this.$store.commit("store中mutations里定义的方法",传参)
+      必须要引入 
+      2.辅助函数
+      解构后 ...mapMutations(["xxx"],["xxx"],....)
+      直接调用 this.xxx()
+      -->
+      <!-- 
+        Actions:
+        定义：方法名（context）{
+                context.commit("同步方法名")
+              } 
+        调用: this.$store.dispatch（“定义的方法”）
+        辅助函数：
+        必须要引入 
+       -->
+       <!-- 
+          Getters
+          1.在标签中调用getters
+          $store.getters.xxxx
+          2.在方法中调用
+          this.$store.getters.xxx
+          3.辅助函数
+          mapGetters
+          必须要引入 
+          使用：...mapGetters(["xxx"],["xxx"],....)
+
+        -->
+    <p>今天的天气：{{$store.state.weather}}</p>
+    <p>我们在：{{$store.state.address}}</p>
+    {{aa}},{{bb}}
+    <br>
+    {{address}}/{{weather}}
+    <h3>数量:{{count}}</h3>
+    <button @click="add">添加</button>
+    <br>
+    <br>
+    <br>
+    <button @click="reduceMain">减少</button>
+    <br>
+    <br>
+    <br>
+    <button @click="changeMain">改变</button>
+    <br>
+    <br>
+    1.{{cc}}/
+    2.{{$store.getters.newCount}}/
+    3.{{newCount}}
+  </div>
 </template>
 
 <script>
+import {mapState,mapMutations,mapActions,mapGetters} from 'vuex';
 export default {
-    name:"New"
+    name:"New",
+    data() {
+      return{
+        // aa:"",
+        // bb:""
+        cc:""
+      }
+    },
+    // state内容 辅助函数在计算属性中调用
+    computed:{
+      ...mapState(["address","weather","count"]),
+        ...mapGetters(["newCount"])
+    },
+    created() {
+      this.aa = this.$store.state.weather;
+      this.bb = this.$store.state.address;
+    },
+    methods:{
+      add() {
+        // mutations => commit
+        this.$store.commit("addCount",10);
+      },
+      // ...mapMutations(["reduce"]),
+    ...mapActions(["asyncAdd"]),
+      reduceMain() {
+        // 同步方法
+        // this.reduce();
+        // this.$store.commit("reduce")
+        // 异步方法
+        // this.$store.dispatch("asyncAdd");
+        this.asyncAdd();
+        
+      },
+      changeMain() {
+        this.cc = this.$store.getters.newCount;
+        console.log(this.$store.getters.newCount)
+      }
+    }
 
 }
 </script>

day33/笔记.md

@@ -1,7 +1,7 @@
 ## 路由重定向 redirect =>router/index.js
 ## 组件缓存   keepAlive =>views/home.vue
 ## 专属生命周期 activated/deactivated => components/vase2.vue
-## 路由守卫： router/index.js
+## 路由守卫： router/index.js 
 ## 路由的两种工作模式：哈希（hash）/history
 <!-- 
   区别  hash => # 

day34/笔记.md

@@ -0,0 +1,18 @@
+## 1.路由跳转 $router =>components/vase.vue
+## 2.vueX
+## store=>index.js && views/New.vue
+
+## VueX
+通过状态（数据源）集中管理驱动组件的变化。页面通过mapActions异步提交事件到actions。actions通过commits把对应参数同步提交到mutations。
+
+mutations会修改state中对于的值。 最后通过getters把对应值跑出去，在页面的计算属性中
+
+通过mapGetters来动态获取state中的值
+
+应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在actions中。
+
+state中保存着共有数据，数据是响应式的
+getters可以对state进行计算操作，主要用来过滤一些数据，可以在多组件之间复用
+mutations定义的方法动态修改state中的数据，通过commit提交方法，方法必须是同步的
+actions将mutations里面处理数据的方法变成异步的，就是异步操作数据，通store.dispatch来分发actions，把异步的方法写在actions中，通过commit提交mutations，进行修改数据。
+modules：模块化vueX