update 集成状态管理

components/footer.vue

@@ -72,31 +72,19 @@
 </template>
 
 <script>
+  import { mapState, mapGetters } from 'vuex';
   export default {
     name:    'mtaFooter',
-    props:   {
-      requestData: {
-        type: Array,
-        default: () => ([])
+    computed: {
+      requestData() {
+        return this.getFooterYouQingLianJie;
       },
+      ...mapGetters(['getFooterYouQingLianJie']),
     },
-    components: {
-
-    },
-    data() {
-      return {
-
-      }
-    },
-    watch:   {},
     methods: {
       goToPage(item){
         window.location.href = item.url
       }
     },
-    created() {
-    console.log(this.requestData);
-   // debugger;
-    },
   }
 </script>

components/header.vue

@@ -17,13 +17,12 @@
               <template slot="title">{{item.content}}</template>
               <el-menu-item :index="`${child.keyPath}`" v-for="child of item.children"
                             :key="child.keyPath">
-                <a :href="`https://www.mtavip.com${child.keyPath}`">{{child.content}}</a>
+                <mtaLink :path="child.keyPath" :instation="true" :content="child.content"></mtaLink>
               </el-menu-item>
             </el-submenu>
 
             <el-menu-item :index="`${item.keyPath}`" v-else>
-
-              <a :href="`https://www.mtavip.com${item.keyPath}`">{{item.content}}</a>
+              <mtaLink :path="item.keyPath" :instation="true" :content="item.content"></mtaLink>
             </el-menu-item>
           </template>
         </el-menu>
@@ -37,10 +36,14 @@
 </template>
 
 <script>
-  let _ = require('lodash')
-  export default {
+  import mtaLink from '~/components/mtaLink/index';
 
+  let _ = require('lodash');
+  export default {
     name:       'mtaHeader',
+    components: {
+      mtaLink,
+    },
     props:      {
       activeNav: { // 默认选中的 路径 与组件中的index相互对应
         type:    String,
@@ -48,14 +51,13 @@
         default: '0',
       },
     },
-    components: {},
     data() {
       return {
         activeIndex: this.activeNav,
-        headerArr:            [
+        headerArr:   [
           {
             content: '首页',
-            keyPath: '/',
+            keyPath: '/?userId=1',
           },
           {
             content:  '考试平台',
@@ -98,23 +100,19 @@
         },
         immediate: true,
       },
-  /*    $route: {
-        handler: function(val, oldVal){
-          debugger;
-          this.activeIndexSync();
-        },
-        // 深度观察监听
-        deep: true
-      }*/
-    },
-    computed:   {
-
+      /*    $route: {
+            handler: function(val, oldVal){
+              debugger;
+              this.activeIndexSync();
+            },
+            // 深度观察监听
+            deep: true
+          }*/
     },
     methods:    {
 
       activeIndexSync() {
         const path = this.$route.path;
-         console.log(path);
         const idx = _.findIndex(this.headerArr, function (o) {
           return o.keyPath === path;
         });
@@ -134,9 +132,9 @@
           }
         }
       },
-    }
-    ,
-    created() {
+    },
+    mounted() {
+      console.log('head:', this.$route.query)
     },
   };
 </script>

components/mtaLink/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <nuxt-link v-if="instation" :to="path">{{content}}</nuxt-link>
+  <a :href="path" :target="target" v-else>{{content}}</a>
+</template>
+
+<script>
+  export default {
+    name:  'mta-link',
+    props: {
+      path:      {
+        required: true,
+        type: String,
+        default:  '/',
+      },
+      instation: {
+        type: Boolean,
+        default: true
+      },
+      target: {
+        type: String,
+        default: '_self',
+        validator: function(value) {
+          return ['_blank', '_self', '_parent', '_top'].indexOf(value) !== -1
+        }
+      },
+      content: {
+        type: String,
+        required: true
+      }
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>

layouts/templateA.vue

@@ -4,7 +4,7 @@
     <div class="nuxt-box">
       <Nuxt />
     </div>
-    <mtafooter :requestData="linksData"></mtafooter>
+    <mtafooter></mtafooter>
   </div>
 </template>
 
@@ -13,29 +13,10 @@
   import Mtaheader from '~/components/header.vue'
   export default {
     name:    'mtaFooter',
-    props:   {
-
-    },
     components: {
       Mtafooter,
       Mtaheader
     },
-    data() {
-      return {
-        linksData: []
-      }
-    },
-    watch:   {},
-    methods: {
-      getLinksData(){
-        this.$axios.post('/home/links/list').then(res=>{
-            this.linksData = res.data.data.data
-        })
-      },
-    },
-    created() {
-      this.getLinksData()
-    },
   }
 </script>
 <style lang="scss" scoped>

pages/index.vue

@@ -308,11 +308,21 @@
 
   export default {
     name: 'Home',
-    components: {
+    layout:'templateA',
+    watchQuery: true,
+    async fetch({$axios, store, query}) {
+      console.log('query =>', query)
+      try {
+        const { data } = await $axios.post('/home/links/list');
+        store.commit('SetFooterYouQingLianJie', data.data.data);
+        store.commit('Home/increment', 3);
+      } catch(e) {
+
+      }
 
     },
-    layout:'templateA',
-    async asyncData({ $axios }) {
+    async asyncData({ $axios, query }) {
+      console.log('query2:', query);
       let [res1,res2] =  await Promise.all([
       await $axios.$post(`/home/news/carousel`).then(res=>{
         return res
@@ -377,10 +387,6 @@
       }
     },
     methods: {
-      async getNewData() {
-        const { data } = await this.$axios.$post(`/home/news/carousel`)
-        this.topCarousels2 = data.data
-      },
       checkInfo() {
         this.$router.push({ name: 'Home' })
       },

pages/test/index.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+      test
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'test',
+    };
+</script>
+
+<style scoped>
+
+</style>

store/Home.js

@@ -0,0 +1,33 @@
+/**
+ * @summary 首页
+ * @date 2020/08/19
+ */
+
+export const state = () => ({
+  counter: 0
+})
+export  const getters = {
+  getCounter(state) {
+    return state.counter
+  }
+}
+export const mutations = {
+  increment(state, payload) {
+    state.counter += payload;
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

store/index.js

@@ -0,0 +1,42 @@
+/**
+ * @summary 主入口
+ * @date 2020/08/19
+ */
+
+export const state = () => ({
+  headerMenu: [],
+  FooterYouQingLianJie: []
+})
+
+export const getters = {
+  getFooterYouQingLianJie(state) {
+    return state.FooterYouQingLianJie;
+  }
+}
+
+
+export const mutations = {
+  SetHeadMenu(state, payload) {},
+  SetFooterYouQingLianJie(state, payload) {
+    state.FooterYouQingLianJie = payload;
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+