admin

10-vuecli/vueapp/myapptwo/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",

10-vuecli/vueapp/myapptwo/src/App.vue

@@ -44,6 +44,7 @@
     name:"App",
     methods:{
       goPage(){
+        console.log(window.location);
         // 用js实现页面跳转 编程式导航
         // this.$router.push("/pagetwo");// 直接跳转到页面二path
         // router-link 路由链接的to属性指定跳转的路径 这里都写在push方法中  

10-vuecli/vueapp/myapptwo/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')

10-vuecli/vueapp/myapptwo/src/router/index.js

@@ -45,6 +45,11 @@ const routes = [
   },{
     path:'/pagetwo',
     name:'pagetwo',
+    // 路由守卫
+    // beforeEnter:(to,from,next) => {
+    //   console.log(to,from,next);
+    //   next();
+    // },
     component:() => import("../views/PageTwo.vue"),
     // 配置子路由
     children:[

10-vuecli/vueapp/myapptwo/src/store/index.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+// vuex 状态管理 可以理解为全局变量池
+// state 在这里定义的变量可以在项目任何地方引用
+export default new Vuex.Store({
+  state: {
+    count:100,
+    str:"hello"
+  },
+  getters: {
+  },
+  // mutations 用于修改 state 中的状态值
+  mutations: {
+    addCount(state,val){
+      state.count = val;
+    }
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

10-vuecli/vueapp/myapptwo/src/views/AboutView.vue

@@ -1,5 +1,36 @@
 <template>
   <div class="about">
     <h1>This is an about page</h1>
+    <h1> vuex中的状态值 {{ $store.state.count }}</h1>
+    <h1> vuex中的状态值 {{ count }}</h1>
+    <h1> vuex中的状态值 {{ str }}</h1>
+
+
+    <h1>当前页面引入的状态值 {{ vuexVal }}</h1>
+    <button @click="addCount(600)">修改状态值</button>
+    <!-- <button @click="changeVuex">修改状态值</button> -->
   </div>
 </template>
+<script>
+  import { mapMutations,mapState } from 'vuex';
+  export default{
+    name:"AboutView",
+    methods:{
+      ...mapMutations(["addCount"]),
+      // changeVuex(){
+      //   // 调用 mutations 中的方法 this.$store.commit() 括号内第一个参数写入要调用的方法名称 从第二个参数开始时要传递的参数;
+      //   this.$store.commit("addCount",300);
+      // }
+    },  
+    created(){
+      console.log(this.$store.state.count);
+      console.log(this.vuexVal);
+    },
+    computed:{
+      ...mapState(["count","str"]),
+      vuexVal(){
+        return this.$store.state.count
+      }
+    }
+  }
+</script>

10-vuecli/vueapp/myapptwo/src/views/ChildPageOne.vue

@@ -1,5 +1,7 @@
 <template>
     <div class="child-page-one">
         <h1>这是子页面一</h1>
+        <h1> vuex中的状态值 {{ $store.state.count }}</h1>
+        <h1>{{ $store.state.str }}</h1>
     </div>
 </template>

10-vuecli/vueapp/myapptwo/src/views/PageTwo.vue

@@ -9,4 +9,24 @@
         <!-- 配置路由出口 页面显示的部分  -->
          <router-view></router-view>
    </div>
-</template>
+</template>
+<script>
+export default{
+    name:"PageTwo",
+    // 路由守卫 
+    // 在离开页面前执行
+    
+    // 路由守卫 离开页面前执行
+    // 里面一共有三个参数 第一个去到那个页面 第二个从那个页出发 第三个next函数 next函数执行后就会跳转页面如果不执行就不会跳转
+    beforeRouteLeave(to,from,next){
+        console.log(to,from,next);
+        next();
+    },
+
+    // 路由守卫 进入页面前执行
+    // beforeRouteEnter(to,from,next){
+    //     console.log(to,from,next);
+    //     next();
+    // }
+}
+</script>