在Vue3项目中，状态管理是一个核心话题。虽然Pinia已经成为官方推荐的状态管理库，但在某些场景下，我们可能需要更轻量级的解决方案。本文将分享一种基于Vue3 Composition API和localStorage的手写状态管理持久化方案，这种实现方式适合中小型项目，特别是当你需要简单的全局状态管理而不想引入额外依赖时。

• 无需额外安装状态管理库
• 代码量少，实现简单
• 直接操作对象属性，无需mutations/actions
• 自动响应式更新
• 内置localStorage持久化

// src/stores/globalValue.js
import { reactive } from 'vue';
// 定义默认状态
const defaultValue = {
    mainTitle: '默认标题',
};

// 从localStorage中获取存储的数据，如果不存在则使用默认值
const getStoredValue = () => {
    try {
        const stored = localStorage.getItem('globalValue');
        return stored ? JSON.parse(stored) : {};
    } catch (e) {
        console.warn('globalValue获取localStorage数据失败', e);
        return {};
    }
};

// 合并默认状态和存储的状态
const initialValue = { ...defaultValue, ...getStoredValue() };

export const globalValue = reactive(initialValue);

// 定义不需要持久化的属性
const nonPersistentProperties = [];
// 监听globalValue的变化并保存到localStorage
const saveValue = () => {
    try {
        // 过滤掉不需要持久化的属性
        const ValueToSave = { ...globalValue };
        nonPersistentProperties.forEach(prop => {
            delete ValueToSave[prop];
        });
        localStorage.setItem('globalValue', JSON.stringify(ValueToSave));
    } catch (e) {
        console.warn('globalValue保存到localStorage失败', e);
    }
};
// 页面卸载前保存状态
window.addEventListener('beforeunload', saveValue);

// 引入方式
import { globalValue } from "@/components/globalValue.js";
// 事件里面变量赋值
globalValue.mainTitle = '默认主题';
// 使用全局变量，动态更新
<div class="mainTitle">{{ globalValue.mainTitle }}</div>