若依分离版(3.7.0),子组件根据不同需要修改父组件app-main的背景颜色。
默认颜色是透明,ABC三个页面,AC用默认,B需要更改为EAEEF4。方法如下:
1.src/store/modules/user.js增加如下代码:
....
const user = {
state: {
....
appMainBg: 'transparent'
},
mutations: {
....
SET_APP_MAIN_BG: (state, appMainBg) => {
state.appMainBg = appMainBg
},
},
2.src/permission.js,路由跳转就重置状态appMainBg值为默认
router.beforeEach((to, from, next) => {
NProgress.start()
if (getToken()) {
store.commit('SET_APP_MAIN_BG', 'transparent');
....
3.src/layout/components/AppMain.vue
<template>
<section class="app-main" :style="'background-color: '+appMainBg+';'">
....
</section>
</template>
<script>
export default {
computed: {
// 增加如下代码
appMainBg() {
console.log(this.$store.getters.appMainBg);
return this.$store.state.user.appMainBg
},
....
}
}
</script>
4.目标页面B。
export default {
....
created() {
this.$store.commit('SET_APP_MAIN_BG', '#EAEEF4');
},
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。