vue 異步組件

<li :class="{'active': AllModule.netWorksView == 'AdNetWorksAbstract'}">
    <a @click="actionView({path: 'AdNetWorksAbstract'})" href="javascript:void(0)">摘要</a>
</li>
<li :class="{'active': AllModule.netWorksView == 'AdNetWorksKeyword'}">
    <a @click="actionView({path: 'AdNetWorksKeyword'})" href="javascript:void(0)">展現廣告網絡關鍵字</a>
</li>

<!--異步組件-->
<keep-alive>
    <compenont :is="AllModule .settingView"></compenont>
</keep-alive>

<script>
  import Vue from 'vue'

/*加載對應組件*/
Vue.component('AdNetWorksAbstract', function (resolve) {
  require(['./AdNetWorks-abstract'], resolve)
})

Vue.component('AdNetWorksKeyword', function (resolve) {
  require(['./AdNetWorks-keyword'], resolve)
})

export default {
　　computed: {
 　　 AllModule () {
    　　return this.$store.state.AllModule
  　　}
　　}
　　methods: {
 　　 // 視圖切換
  　　actionView (argus) {
         // 組件加載
             this.$store.commit('ALL_NET_WORK_VIEW', argus)  // 把路徑對象{path: 'AdNetWorksKeyword'}傳到mutation，在mutation的方法下改變狀態，加載對應組件
         return
  　　}
　 }
}

/*更改視圖狀態  :is="AllModule .settingView"   AllModule .settingView的這個變量經過點擊事件提交mutation處理*/
    const = muatation{

　　    [ALL_NET_WORK_VIEW] (state, argus) {
    　　state.netWorksView = argus.path
　　    }

    }

    const state = {

　　    netWorksView: 'AdNetWorksAbstract', //這裏是進來後默認的組件狀態

    }
</script>

Vuex關於數據和視圖操做都離不開狀態的改變