注册商标符号_公众号推广渠道_企业推广公司_seo优化教程培训

1. 基本知识

createGlobalState 是 Vue 3 中一种管理全局状态的简便方式，通常用于管理多个组件间共享的状态

由 @vueuse/core 提供的，允许创建一个响应式的全局状态，可以在任意组件中访问和更新

基本的特性如下：

• 响应式：状态是响应式的，任何组件对状态的访问和修改都会触发相应的更新
• 简单易用：通过简单的 API 可以创建和管理全局状态
• 模块化：可以根据需要将状态逻辑分离到不同的模块中

特性	有 createGlobalState	没有 createGlobalState
全局状态管理	方便、简单	复杂，通常需要手动管理状态传递
响应式	自动响应式更新	需要使用 Vuex 或 EventBus 等手动实现
代码可读性	更清晰、更简洁	代码可能更加混乱
模块化	可以方便地组织全局状态	通常需要复杂的状态管理逻辑

需要确保安装了 @vueuse/core：

2. Demo

一般与 useStorage 一起存储在 localStorage 中比较好，否则刷新网页链接的时候会丢失的！

以下是没有存储到localStorage的Demo

相关的Demo如下：

src/globalState.js，定义全局状态：

// src/globalState.js
import { createGlobalState } from '@vueuse/core';
import { reactive } from 'vue';// 创建全局状态
export const useGlobalState = createGlobalState(() => {return reactive({count: 0});
});

MyDemoComponent.vue 中使用全局状态：

<template><div><h2>全局计数器</h2><p>当前计数: {{ globalState.count }}</p><button @click="increment">增加计数</button></div>
</template><script>
import { useGlobalState } from '../globalState';export default {setup() {const globalState = useGlobalState();const increment = () => {globalState.count++;};return {globalState,increment};}
};
</script>

确保在 App.vue 中使用新的组件：

<template><div id="app"><MyDemoComponent /></div>
</template><script>
import MyDemoComponent from './components/MyDemoComponent.vue';export default {components: {MyDemoComponent}
};
</script>

最终截图如下：

也给一版没有使用的Demo：

可能会使用一个简单的 EventBus 或 Vuex 来管理全局状态，示例可能如下：

// src/eventBus.js
import { reactive } from 'vue';
import { createApp } from 'vue';const state = reactive({count: 0
});const eventBus = createApp({});export const useEventBus = () => {return {state,increment: () => {state.count++;eventBus.config.globalProperties.$emit('update');}};
};

在 MyDemoComponent.vue 中：

<template><div><h2>全局计数器</h2><p>当前计数: {{ eventBus.state.count }}</p><button @click="increment">增加计数</button></div>
</template><script>
import { useEventBus } from '../eventBus';export default {setup() {const eventBus = useEventBus();return {eventBus,increment: eventBus.increment};}
};
</script>