快捷導(dǎo)航

Vue3中的createGlobalState用法及示例詳解

更新時(shí)間：2024年10月31日 09:20:40 作者：碼農(nóng)研究僧

createGlobalState 是 Vue 3 中一種管理全局狀態(tài)的簡(jiǎn)便方式,通常用于管理多個(gè)組件間共享的狀態(tài),由 @vueuse/core 提供的,允許創(chuàng)建一個(gè)響應(yīng)式的全局狀態(tài),本文給大家介紹了Vue3中的createGlobalState用法及示例,需要的朋友可以參考下

1. 基本知識(shí)

createGlobalState 是 Vue 3 中一種管理全局狀態(tài)的簡(jiǎn)便方式，通常用于管理多個(gè)組件間共享的狀態(tài)

由 @vueuse/core 提供的，允許創(chuàng)建一個(gè)響應(yīng)式的全局狀態(tài)，可以在任意組件中訪(fǎng)問(wèn)和更新

基本的特性如下：

響應(yīng)式：狀態(tài)是響應(yīng)式的，任何組件對(duì)狀態(tài)的訪(fǎng)問(wèn)和修改都會(huì)觸發(fā)相應(yīng)的更新
簡(jiǎn)單易用：通過(guò)簡(jiǎn)單的 API 可以創(chuàng)建和管理全局狀態(tài)
模塊化：可以根據(jù)需要將狀態(tài)邏輯分離到不同的模塊中

特性	有 createGlobalState	沒(méi)有 createGlobalState
全局狀態(tài)管理	方便、簡(jiǎn)單	復(fù)雜，通常需要手動(dòng)管理狀態(tài)傳遞
響應(yīng)式	自動(dòng)響應(yīng)式更新	需要使用 Vuex 或 EventBus 等手動(dòng)實(shí)現(xiàn)
代碼可讀性	更清晰、更簡(jiǎn)潔	代碼可能更加混亂
模塊化	可以方便地組織全局狀態(tài)	通常需要復(fù)雜的狀態(tài)管理邏輯

需要確保安裝了 @vueuse/core：

2. Demo

一般與 useStorage 一起存儲(chǔ)在 localStorage 中比較好，否則刷新網(wǎng)頁(yè)鏈接的時(shí)候會(huì)丟失的！

以下是沒(méi)有存儲(chǔ)到localStorage的Demo

相關(guān)的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>全局計(jì)數(shù)器</h2>
    <p>當(dāng)前計(jì)數(shù): {{ globalState.count }}</p>
    <button @click="increment">增加計(jì)數(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>

最終截圖如下：

也給一版沒(méi)有使用的Demo：

可能會(huì)使用一個(gè)簡(jiǎn)單的 EventBus 或 Vuex 來(lái)管理全局狀態(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>全局計(jì)數(shù)器</h2>
    <p>當(dāng)前計(jì)數(shù): {{ eventBus.state.count }}</p>
    <button @click="increment">增加計(jì)數(shù)</button>
  </div>
</template>

<script>
import { useEventBus } from '../eventBus';

export default {
  setup() {
    const eventBus = useEventBus();

    return {
      eventBus,
      increment: eventBus.increment
    };
  }
};
</script>

到此這篇關(guān)于Vue3中的createGlobalState用法及示例詳解的文章就介紹到這了,更多相關(guān)Vue3 createGlobalState用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: