Vue3中的createGlobalState用法及示例详解
作者：码农研究僧
createGlobalState 是 Vue 3 中一种管理全局状态的简便方式,通常用于管理多个组件间共享的状态,由 @vueuse/core 提供的,允许创建一个响应式的全局状态,本文给大家介绍了Vue3中的createGlobalState用法及示例,需要的朋友可以参考下
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>
到此这篇关于Vue3中的createGlobalState用法及示例详解的文章就介绍到这了,更多相关Vue3 createGlobalState用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！