vuex 用于持久化全屏切换时的窗口布局配置，将面板状态、分栏宽度等存于 store state，通过监听 fullscreenchange 更新，并用 getters 派生样式类，配合 vuex-persistedstate 持久化至 localstorage。
全屏切换时保留窗口布局配置，关键不是“存下来”，而是让布局状态本身不随视图销毁而丢失——Vuex 正是为此类跨生命周期、跨组件共享状态设计的。
把布局配置定义为 Vuex 的 state
布局信息（如面板是否展开、分栏宽度、折叠状态、当前激活 tab）属于典型的全局可复用状态，应直接纳入 store 的 state 中，而不是存在组件 data 或 ref 里。
- 例如在
store/modules/layout.js中声明：
state: {
isFullscreen: false,
sidebarCollapsed: false,
mainSplitWidth: 240,
activeTab: 'dashboard',
gridLayout: { rows: 2, cols: 3 }
}
这样无论组件卸载、路由跳转或全屏切换，只要 store 实例存活，这些值就一直存在。
在全屏事件中同步更新 state
监听浏览器原生的全屏切换事件（fullscreenchange），并在回调中 commit mutation 更新状态。
- 在组件的
mounted钩子中注册监听：
mounted() {
document.addEventListener('fullscreenchange', this.handleFullscreenChange)
},
beforeUnmount() {
document.removeEventListener('fullscreenchange', this.handleFullscreenChange)
},
methods: {
handleFullscreenChange() {
const isFs = !!document.fullscreenElement
this.$store.commit('layout/setFullscreen', isFs)
}
}
注意：Vue 3 + Composition API 可改用 onMounted/onBeforeUnmount + useStore。
用 getters 派生响应式布局逻辑
避免在模板中反复判断 isFullscreen && !sidebarCollapsed 这类组合条件。用 getters 封装计算逻辑，自动响应依赖变化。
- 例如：
getters: {
layoutClass: (state) => {
return {
'full-layout': state.isFullscreen,
'collapsed-sidebar': state.sidebarCollapsed,
'compact-mode': state.isFullscreen && state.sidebarCollapsed
}
}
}
模板中直接绑定：<div :class="$store.getters['layout/layoutClass']">，全屏一触发，样式立刻更新。
<h3>配合持久化插件保存用户偏好</h3>
<p>如果希望用户下次打开页面时仍保持上次的全屏+布局状态，需将关键字段持久化到 <code>localStorage。
- 推荐使用
vuex-persistedstate插件，只持久化 layout 模块：
import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
modules: { layout },
plugins: [
createPersistedState({
key: 'app-layout-config',
paths: ['layout']
})
]
})
这样即使刷新页面或关闭浏览器，布局配置也不会丢失，真正实现“所见即所得”的连续体验。
