使用Vue.js Composition API实现类Vuex全局响应式状态的最佳方案是什么

对于不需要引入Pinia/Vuex的中小型项目，基于Vue 3原生API实现的轻量状态管理是性价比最高的方案，核心利用ES模块的单例特性 + 响应式API实现类Vuex的单向数据流能力。

核心实现逻辑 #

• 利用ES模块天然单例的特性，全局只会初始化一次状态实例，所有组件共享同一份状态
• 内部用reactive创建可变的响应式状态，不对外直接暴露可写的状态实例
• 所有状态变更都通过模块内部定义的方法触发，相当于Vuex的mutations，保证状态变更可追溯
• 对外导出时用readonly包裹状态，禁止业务侧直接修改状态，严格遵循单向数据流

参考实现代码 #

import { reactive, readonly } from "vue";

// 内部私有响应式状态，外部无法直接修改
const state = reactive({
  count: 0
});

// 状态修改方法，所有变更都走该方法，方便调试和追踪
const increment = function () {
  state.count++;
}

// 对外暴露只读状态和修改方法
export default { state: readonly(state), increment };

组件内使用示例 #

<script setup>
// 直接引入状态模块即可，不需要注册插件
import counterStore from '@/store/counter'
</script>

<template>
  <div>当前计数：{{ counterStore.state.count }}</div>
  <button @click="counterStore.increment">点击加1</button>
</template>

复杂场景优化点 #

• 状态拆分：按业务模块拆分多个独立的状态文件，再统一聚合到根store导出，降低维护成本
• 持久化：可以封装通用逻辑，状态变更时自动同步到本地存储，刷新页面也能保留状态
• 调试能力：开发环境下可以打印每次状态变更的触发方法、前后值，也可以接入Vue devtools实现状态回溯

内容的提问来源于stack exchange，提问作者amirrr1987