vue项目中，菜单折叠会影响多个地方的样式

在 Vue 项目中，当菜单折叠（折叠状态切换）时会影响多个地方的样式，处理这一问题的关键是合理管理折叠状态，并在需要的组件或样式中响应该状态变化。

使用全局状态管理（如 Vuex 或 Pinia）

1. 使用全局状态管理工具：如 Vuex 或 Pinia，把菜单折叠状态放入全局状态中，这样每个需要响应菜单折叠状态变化的组件都可以访问该状态。

2. 实现步骤：

   2.1 在 Vuex 或 Pinia 中定义一个 isCollapsed 的状态变量来表示菜单是否折叠。
   2.2 在组件中通过 getter 方法访问 isCollapsed，并根据其值动态调整样式。
   2.3 在菜单组件中更改折叠状态时，通过 mutation 或 action 来更新 isCollapsed。

   代码示例（使用 Pinia）：

// javascript
// store.js
import { defineStore } from 'pinia';

export const useMenuStore = defineStore('menu', {
  state: () => ({
    isCollapsed: false,
  }),
  actions: {
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
    },
  },
});

// vue
<!-- 在组件中使用 -->
<template>
  <div :class="{ 'collapsed-menu': isCollapsed }">
    <!-- 组件内容 -->
  </div>
</template>

<script>
import { useMenuStore } from '@/store';

export default {
  setup() {
    const menuStore = useMenuStore();
    const isCollapsed = computed(() => menuStore.isCollapsed);

    return { isCollapsed };
  },
};
</script>

<style scoped>
.collapsed-menu {
  /* 这里定义菜单折叠时的样式 */
}
</style>

好奇心满足！！！