Vue3中的createGlobalState用法及示例详解

// src/globalState.js
import { createGlobalState } from '@vueuse/core';
import { reactive } from 'vue';

// 创建全局状态
export const useGlobalState = createGlobalState(() => {
  return reactive({
    count: 0
  });
});

<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>

<template>
  <div id="app">
    <MyDemoComponent />
  </div>
</template>

<script>
import MyDemoComponent from './components/MyDemoComponent.vue';

export default {
  components: {
    MyDemoComponent
  }
};
</script>

// 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');
    }
  };
};

<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>