Vue3中实现全局双向绑定变量
在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>