vue.js - Vue 收到了一个组件,它是一个响应式对象
问题描述
我需要解决的问题:我正在写一个基于VueJS3的小vue-app。
我有很多不同的侧边栏,我需要防止同时打开多个侧边栏的情况。
为了存档这个,我正在关注这篇文章。
现在我遇到了一个问题:
Vue 收到了一个组件,它是一个响应式对象。这可能会导致不必要的性能开销,应通过使用
markRaw
或使用shallowRef
而不是标记组件来避免ref
。(6)
这是我的代码:
SlideOvers.vue
<template>
<component :is="component" :component="component" v-if="open"/>
</template>
<script>
export default {
name: 'SlideOvers',
computed: {
component() {
return this.$store.state.slideovers.sidebarComponent
},
open () {
return this.$store.state.slideovers.sidebarOpen
},
},
}
</script>
UserSlideOver.vue
<template>
<div>test</div>
</template>
<script>
export default {
name: 'UserSlideOver',
components: {},
computed: {
open () {
return this.$store.state.slideovers.sidebarOpen
},
component () {
return this.$store.state.slideovers.sidebarComponent
}
},
}
</script>
slideovers.js
(vuex商店)
import * as types from '../mutation-types'
const state = {
sidebarOpen: false,
sidebarComponent: null
}
const getters = {
sidebarOpen: state => state.sidebarOpen,
sidebarComponent: state => state.sidebarComponent
}
const actions = {
toggleSidebar ({commit, state}, component) {
commit (types.TOGGLE_SIDEBAR)
commit (types.SET_SIDEBAR_COMPONENT, component)
},
closeSidebar ({commit, state}, component) {
commit (types.CLOSE_SIDEBAR)
commit (types.SET_SIDEBAR_COMPONENT, component)
}
}
const mutations = {
[types.TOGGLE_SIDEBAR] (state) {
state.sidebarOpen = !state.sidebarOpen
},
[types.CLOSE_SIDEBAR] (state) {
state.sidebarOpen = false
},
[types.SET_SIDEBAR_COMPONENT] (state, component) {
state.sidebarComponent = component
}
}
export default {
state,
getters,
actions,
mutations
}
App.vue
<template>
<SlideOvers/>
<router-view ref="routerView"/>
</template>
<script>
import SlideOvers from "./SlideOvers";
export default {
name: 'app',
components: {SlideOvers},
};
</script>
这就是我尝试切换一个幻灯片的方式:
<template>
<router-link
v-slot="{ href, navigate }"
to="/">
<a :href="href"
@click="$store.dispatch ('toggleSidebar', userslideover)">
Test
</a>
</router-link>
</template>
<script>
import {defineAsyncComponent} from "vue";
export default {
components: {
},
data() {
return {
userslideover: defineAsyncComponent(() =>
import('../../UserSlideOver')
),
};
},
};
</script>
解决方案
推荐阅读
- php - Angular 发布到 PHP
- python - Python:将一些参数传递给函数参数
- angular - PrimeNG PIE 图表值未显示在 Slice 上 - 如何在默认加载时显示值而不是将鼠标悬停在
- excel - Excel VBA 用于将单元格中的超链接公式链接到宏
- python - Python模式或()
- html - 在 Safari (Mac) 上仅同时播放一个视频
- django - Django在多对多字段中的反向关系
- flutter - 由于上述问题,无法构建插件 shared_preferences
- android - 如何让以下外键在firebase中工作
- r - 将 survfit() 应用于生存对象列表