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关于数据和视图操作都离不开状态的改变