<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关于数据和视图操作都离不开状态的改变
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步