详细分析Vue3中的createGlobalState基本知识（附Demo）

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>