在store文件夹中，创建collapse文件夹，以及index.ts文件

配置index.ts文件，存储一个布尔值，用来控制图标变化

在vite-env.d.ts文件中配置store的导出

在layout.header/Collapse.vue中，添加动态组件
通过动态组件，实现图标点击事件

为图标添加点击事件，点击后store中存储的值取反，结合动态组件改变图标状态

ps：使用动态组件时，需要局部引入图标

order-system/src/layout/header/Collapse.vue

@@ -1,11 +1,41 @@
 <template>
-  <div>
+  <!-- 添加图标替换文字 -->
-    收缩图标
+  <el-icon style="cursor: pointer" :size="26" @click="iconClick">
-  </div>
+      <!-- <Expand /> -->
+      <!-- 使用动态组件 -->
+      <!-- currentTab 改变时组件也改变 -->
+      <component :is="status ? Expand : Fold"></component>
+  </el-icon>
 </template>
 
 <script setup lang="ts">
+  // 已经全局引入图标，不需要单独引入
+  // 切换至使用动态组件，此时需要局部引入
 
+  import { Expand, Fold } from '@element-plus/icons-vue';
+
+
+  // 引入computed
+  import { computed } from 'vue'
+
+  // 引入useCollapseStore
+  import { useCollapseStore } from '@/store/collapse';
+  
+
+  // 获取store
+  const store = useCollapseStore()
+
+  // 获取状态
+  const status = computed(()=>{
+    return store.getcollapse
+  })
+
+  // 给图标添加点击事件
+  const iconClick = ()=>{
+    
+    // 通过取反collapse管理图标的状态值
+    store.collapse = (!store.collapse)
+  }
 </script>
 
 <style scoped>

order-system/src/store/collapse/index.ts

@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'
+
+export const useCollapseStore = defineStore('collapseStore', {
+  state: () => {
+    return {
+      collapse: false
+    }
+  },
+
+  // getter
+  getters:{
+    // 数据放在state里面，需要传递state
+    getcollapse(state){
+      return state.collapse
+    }
+  },
+
+  // action
+  actions:{
+    // 设置state里面的数据
+    setcollapse(collapse:boolean){
+      this.collapse = collapse
+    }
+  }
+})

order-system/src/vite-env.d.ts

@@ -43,4 +43,7 @@ declare module '@/store/*' {
   export const useTestStore: StoreDefinition;
   // 或者更通用的声明方式
   export function useTestStore(): any;
+
+  // useCollapseStore导出
+  export function useCollapseStore(): any;
 }