Vue3中的createGlobalState用法及示例詳解
更新時間：2024年10月31日 09:20:40 作者：碼農(nóng)研究僧
createGlobalState 是 Vue 3 中一種管理全局狀態(tài)的簡便方式,通常用于管理多個組件間共享的狀態(tài),由 @vueuse/core 提供的,允許創(chuàng)建一個響應式的全局狀態(tài),本文給大家介紹了Vue3中的createGlobalState用法及示例,需要的朋友可以參考下
1. 基本知識
createGlobalState 是 Vue 3 中一種管理全局狀態(tài)的簡便方式，通常用于管理多個組件間共享的狀態(tài)
由 @vueuse/core 提供的，允許創(chuàng)建一個響應式的全局狀態(tài)，可以在任意組件中訪問和更新
基本的特性如下：
- 響應式：狀態(tài)是響應式的，任何組件對狀態(tài)的訪問和修改都會觸發(fā)相應的更新
- 簡單易用：通過簡單的 API 可以創(chuàng)建和管理全局狀態(tài)
- 模塊化：可以根據(jù)需要將狀態(tài)邏輯分離到不同的模塊中
| 特性 | 有 createGlobalState | 沒有 createGlobalState |
|---|---|---|
| 全局狀態(tài)管理 | 方便、簡單 | 復雜，通常需要手動管理狀態(tài)傳遞 |
| 響應式 | 自動響應式更新 | 需要使用 Vuex 或 EventBus 等手動實現(xiàn) |
| 代碼可讀性 | 更清晰、更簡潔 | 代碼可能更加混亂 |
| 模塊化 | 可以方便地組織全局狀態(tài) | 通常需要復雜的狀態(tài)管理邏輯 |
需要確保安裝了 @vueuse/core：
2. Demo
一般與 useStorage 一起存儲在 localStorage 中比較好，否則刷新網(wǎng)頁鏈接的時候會丟失的！
以下是沒有存儲到localStorage的Demo
相關的Demo如下：
src/globalState.js，定義全局狀態(tài)：
// src/globalState.js
import { createGlobalState } from '@vueuse/core';
import { reactive } from 'vue';
// 創(chuàng)建全局狀態(tài)
export const useGlobalState = createGlobalState(() => {
return reactive({
count: 0
});
});
MyDemoComponent.vue 中使用全局狀態(tài)：
<template>
<div>
<h2>全局計數(shù)器</h2>
<p>當前計數(shù): {{ globalState.count }}</p>
<button @click="increment">增加計數(shù)</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 來管理全局狀態(tài)，示例可能如下：
// 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>全局計數(shù)器</h2>
<p>當前計數(shù): {{ eventBus.state.count }}</p>
<button @click="increment">增加計數(shù)</button>
</div>
</template>
<script>
import { useEventBus } from '../eventBus';
export default {
setup() {
const eventBus = useEventBus();
return {
eventBus,
increment: eventBus.increment
};
}
};
</script>
到此這篇關于Vue3中的createGlobalState用法及示例詳解的文章就介紹到這了,更多相關Vue3 createGlobalState用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
options顧名思義是選項的意思，或稱為構(gòu)造選項。是在創(chuàng)建vue實例時傳入的參數(shù)，是一個對象。該對象包含哪些屬性？每個屬性都是什么含義？本篇文章就來帶大家詳細了解其中的奧秘2021-05-05
vue組件props不同數(shù)據(jù)類型傳參的默認值問題
這篇文章主要介紹了vue組件props不同數(shù)據(jù)類型傳參的默認值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了解決運行vue項目內(nèi)存溢出問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue如何使用外部特殊字體的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue學習筆記之作用域插槽,結(jié)合實例形式分析了vue.js作用域插槽基本使用方法及操作注意事項,需要的朋友可以參考下2020-02-02
在實際項目開發(fā)中,幾乎每個組件中都會用到?axios?發(fā)起數(shù)據(jù)請求,下面這篇文章主要給大家總結(jié)介紹了關于Vue3全局配置axios的兩種方式,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue之解決Echarts組件使用ID不能復用的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue2.5.2使用http請求獲取靜態(tài)json數(shù)據(jù)的實例代碼
這篇文章主要介紹了vue2.5.2使用http請求獲取靜態(tài)json數(shù)據(jù)的實例代碼,需要的朋友可以參考下2018-02-02
CryptoJS是一個強大的JavaScript庫,它提供了多種加密解密功能,尤其是AES加密方法,使用CryptoJS,我們可以有效地保護數(shù)據(jù)安全,防止信息泄露,通過簡單的安裝和函數(shù)編寫,本文給大家介紹Vue3 如何使用CryptoJS加密,感興趣的朋友一起看看吧2024-10-10
這篇文章主要介紹了Vue使用formData格式類型上傳文件的示例代碼，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-09-09