如果你不想用Vuex 或Pinia 來管理全局狀態(tài)，還是有幾種更輕量、靈活的方式可以實現(xiàn)類似效果：1. 使用Vue 的provide/inject 機制，在根組件通過provide 暴露響應(yīng)式對象，子組件通過inject 獲取並修改狀態(tài)，適合中小型項目簡單共享狀態(tài)；2. 借助自定義組合函數(shù)reactive/ref 創(chuàng)建可複用的狀態(tài)模塊，導(dǎo)出狀態(tài)和操作方法，便於測試和擴展；3. 利用瀏覽器內(nèi)置存儲狀態(tài)同步，結(jié)合localStorage 和內(nèi)存中的響應(yīng)式狀態(tài)，實現(xiàn)刷新後仍保留的持久化狀態(tài)管理。這些方式雖然不復(fù)雜，但需要開發(fā)者自行處理好狀態(tài)變更和組件通信的細節(jié)。

直接回答標題的問題：如果你不想用Vuex 或Pinia 來管理全局狀態(tài)，還是有幾種更輕量、靈活的方式可以實現(xiàn)類似效果。

使用Vue 的provide / inject 機制

provide和inject是Vue 提供的父子組件之間傳遞數(shù)據(jù)的一種方式，雖然它不是專門為全局狀態(tài)設(shè)計的，但在中小型項目中，完全可以用來做簡單的全局狀態(tài)共享。

做法是：

• 在根組件（通常是App.vue）中通過provide暴露一個響應(yīng)式對象。
• 子組件通過inject獲取這個對象，從而訪問或修改狀態(tài)。

舉個例子：

 // 根組件import { ref } from 'vue'

export default {
  setup() {
    const globalState = ref({
      theme: 'dark',
      user: null,
    })

    return {
      provide: () => ({
        globalState: globalState.value,
        setGlobalState: (newState) => {
          globalState.value = { ...globalState.value, ...newState }
        },
      }),
    }
  },
}

子組件中使用：

 export default {
  inject: ['globalState', 'setGlobalState'],
  methods: {
    changeTheme() {
      this.setGlobalState({ theme: 'light' })
    },
  },
}

注意：這種方式適合不需要頻繁更新、結(jié)構(gòu)不復(fù)雜的場景。如果狀態(tài)變更頻繁，容易造成維護困難。

借助自定義組合函數(shù)reactive / ref

Vue 3 的Composition API 讓你可以非常方便地創(chuàng)建一個可複用的狀態(tài)模塊。

思路是：

1. 創(chuàng)建一個JS 文件專門存放狀態(tài)和操作方法。
2. 用reactive或ref創(chuàng)建響應(yīng)式狀態(tài)。
3. 導(dǎo)出狀態(tài)和修改狀態(tài)的方法。
4. 各個組件引入並使用。

比如：

 // store.js
import { ref } from 'vue'

const state = ref({
  count: 0,
  loading: false,
})

function increment() {
  state.value.count  
}

function setLoading(loading) {
  state.value.loading = loading
}

export { state, increment, setLoading }

在組件中使用：

 import { state, increment } from '@/store'

export default {
  setup() {
    return {
      state,
      increment,
    }
  },
}

這種做法很輕量，沒有額外依賴，也便於測試和擴展。但需要注意的是，如果多個組件同時修改狀態(tài)，調(diào)試時可能會不太直觀。

利用瀏覽器內(nèi)置存儲狀態(tài)同步

如果你希望狀態(tài)在刷新後還能保留，可以用localStorage或sessionStorage結(jié)合內(nèi)存中的響應(yīng)式狀態(tài)來實現(xiàn)。

基本流程如下：

• 初始化時從localStorage讀取狀態(tài)。
• 修改狀態(tài)時同步更新內(nèi)存和本地存儲。
• 組件監(jiān)聽變化並重新渲染。

示例代碼片段：

 import { ref, watch } from 'vue'

const localState = JSON.parse(localStorage.getItem('appState') || '{}')

const state = ref({
  username: localState.username || '',
  darkMode: localState.darkMode ?? true,
})

watch(
  () => state.value,
  (newVal) => {
    localStorage.setItem('appState', JSON.stringify(newVal))
  },
  { deep: true }
)

這種方式適合需要持久化的小型狀態(tài)，比如用戶偏好設(shè)置等。

總結(jié)一下

你可以在不使用Vuex 或Pinia 的情況下：

• 用provide/inject實現(xiàn)跨層級狀態(tài)共享；
• 用自定義組合函數(shù)響應(yīng)式API 構(gòu)建輕量狀態(tài)模塊；
• 用本地存儲內(nèi)存狀態(tài)實現(xiàn)持久化狀態(tài)管理。

這些方式都不復(fù)雜，但都需要你自己處理好狀態(tài)變更和組件通信的細節(jié)。

基本上就這些了。

以上是如何在沒有Vuex或Pinia的情況下處理全球狀態(tài)？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！