掌握 Nuxt 3 中的狀態管理：實踐指南

Amd794發表於2024-06-22

title: 掌握 Nuxt 3 中的狀態管理：實踐指南
date: 2024/6/22
updated: 2024/6/22
author: cmdragon

excerpt:
摘要：該文指南詳述了Nuxt 3的概況與安裝，聚焦於在Nuxt 3框架下運用Vuex進行高效的狀態管理，涵蓋基礎配置、模組化實踐至高階策略，助力開發者構建高效能前後端分離應用。

categories:

前端開發

tags:

Nuxt 3
Vuex
狀態管理
前後端分離
模組化
TypeScript
Web開發

第1章：Nuxt 3 簡介

1.1 Nuxt.js 3.0概述

Nuxt.js 是一個基於 Vue.js 的伺服器端渲染(SSR)框架，它為開發者提供了一個優雅的架構，用於建立服務端渲染的Vue應用。Nuxt.js 3.0 是該框架的下一代版本，它建立在 Vue 3 的基礎上，利用 Vue 3 的 Composition API 提供更強大的功能和更靈活的開發體驗。

Nuxt 3.0 的主要特點包括：

Vue 3 整合：完全支援 Vue 3，包括 Composition API 和其他 Vue 3 的新特性。
改進的構建和部署流程：更快的構建速度和更最佳化的打包方式。
增強的配置系統：更靈活的配置選項，允許開發者更細粒度地控制應用的行為。
新的目錄結構：提供了更清晰和模組化的專案結構。
型別安全：支援 TypeScript，增強了程式碼的可維護性和型別檢查。

1.2 安裝與配置

在開始使用 Nuxt 3 之前，確保你的開發環境中已經安裝了 Node.js（推薦版本為 LTS）。以下是在專案中安裝 Nuxt 3 的步驟：

初始化一個新的 Nuxt 3 專案：

npx nuxi init my-nuxt3-project
進入專案目錄：

cd my-nuxt3-project
安裝專案依賴：

npm install
執行開發伺服器：

npm run dev

預設情況下，Nuxt 3 會監聽 http://localhost:3000 地址。

對於配置，Nuxt 3 提供了 nuxt.config.ts（或 .js）檔案，你可以在這裡定製應用的配置，例如：

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    // 引入模組
  ],
  css: [
    // 引入全域性樣式
  ],
  build: {
    // 構建配置
  },
  // 其他配置...
})

1.3 前後端分離架構

Nuxt.js 作為一個SSR框架，天然支援前後端分離的架構。在這種架構中，前端負責使用者介面和互動，而後端負責資料處理和業務邏輯。以下是前後端分離架構的幾個關鍵點：

SSR（伺服器端渲染）：Nuxt.js 預設支援SSR，這意味著應用的初始頁面是在伺服器上渲染的，然後傳送給客戶端，這有助於提高首屏載入速度和SEO最佳化。
API服務：後端通常提供一個API服務，前端透過AJAX或Fetch API與後端通訊，獲取或傳送資料。
同構應用：Nuxt.js 可以在伺服器和客戶端上執行相同的程式碼，這簡化了開發流程，並確保了使用者體驗的一致性。
內容分發網路（CDN）：靜態資源可以部署到CDN上，以減少伺服器負載，並提高資源載入速度。

透過使用 Nuxt.js 3，開發者可以更加便捷地構建符合現代Web應用要求的前後端分離架構。

第2章：Vuex簡介

2.1 Vuex原理

Vuex 是一個專為 Vue.js 應用程式設計的狀態管理模式，它提供了一種集中式儲存應用狀態的方式，使得狀態能夠以模組化和可預測的方式進行管理。Vuex 的核心原理是：

單一狀態源：所有元件共享同一個狀態樹，避免了狀態的重複和混亂。
集中式管理：狀態的變化透過 mutations（狀態更新函式）進行，actions（非同步操作）觸發 mutations。
模組化結構：狀態和邏輯被組織成一個個模組，每個模組有自己的狀態和 mutations，易於維護和複用。
響應式：當狀態改變時，所有依賴該狀態的元件會自動更新。

2.2 安裝與配置

安裝 Vuex 通常是在專案的 main.js 或 nuxt.config.js 中進行，如果你使用 Nuxt.js，可以在 nuxt.config.js 中新增：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

對於 Nuxt 3，你可以在 nuxt.config.ts 中匯入並使用：

import { createApp } from 'vue'
import App from '@/App.vue'
import store from '@/store'

const app = createApp(App)
app.use(store)
app.mount('#app')

2.3 基本資料管理

2.3.1 建立Vuex store

首先，建立一個名為 store.js 或 store.ts 的檔案，定義你的狀態（state）和動作（mutations）：

// store.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    },
    decrement(context) {
      context.commit('decrement')
    }
  }
})

2.3.2 在元件中使用Vuex

在元件中，你可以透過 this.$store 訪問 store，並透過 this.$store.dispatch 呼叫 actions：

<template>
  <div>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment')
    }
  }
}
</script>

透過以上步驟，你已經設定了基本的 Vuex 狀態管理，所有的元件都可以透過 store 來共享和管理資料。

第3章：Nuxt 3與Vuex整合

3.1 Nuxt中Vuex的使用

在 Nuxt 3 中使用 Vuex 與在 Vue 中使用類似，只有一些細微差別。在 Nuxt 3 中，你可以在 composables 或 setup 函式中直接使用 useStore 函式來獲取 store 例項。

首先，在你的專案中建立一個名為 store 的資料夾，並在其中建立一個名為 index.js 或 index.ts 的檔案，用於存放你的 Vuex store。

3.2 Store的建立與結構

在 store/index.js 中建立一個 Vuex store 例項：

// store/index.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    },
    decrement(context) {
      context.commit('decrement')
    }
  }
})

3.3 mutations和actions

在 Nuxt 3 中，你可以在元件中使用 useStore 函式來獲取 store 例項，並使用 mutations 和 actions：

<template>
  <div>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script setup>
import { useStore } from 'vuex'

const store = useStore()

const count = computed(() => store.state.count)

function increment() {
  store.dispatch('increment')
}
</script>

在這個示例中，我們使用 useStore 函式獲取了 store 例項，並使用 computed 函式獲取了狀態 count。當點選按鈕時，呼叫 store.dispatch('increment') 來觸發 increment action。

在 Nuxt 3 中，你可以使用 useStore 函式來獲取 store 例項，並在元件中使用 mutations 和 actions。這種方式更加簡單和直觀，並且可以更好地與 Composition API 整合。

第4章：狀態管理最佳實踐

4.1 分模組管理

為了保持程式碼的可維護性和組織性，將 Vuex store 分模組管理是一個好習慣。建立多個小的 store 檔案，每個檔案專注於處理特定領域的資料。例如，你可以有 userStore.js、productStore.js 等。

// userStore.js
export const state = () => ({
  isLoggedIn: false,
  userId: null
})

export const mutations = {
  login(state, payload) {
    state.isLoggedIn = payload.isLoggedIn
    state.userId = payload.userId
  },
  logout(state) {
    state.isLoggedIn = false
    state.userId = null
  }
}

// productStore.js
export const state = () => ({
  products: []
})

export const mutations = {
  addProduct(state, product) {
    state.products.push(product)
  },
  removeProduct(state, productId) {
    state.products = state.products.filter(product => product.id !== productId)
  }
}

4.2 使用型別安全

使用 TypeScript 或 Flow 可以為 Vuex store 的狀態、mutations 和 actions 提供型別安全。這有助於在編譯時發現潛在的錯誤。

// 使用TypeScript
import { StoreModule } from 'vuex'

type UserState = {
  isLoggedIn: boolean
  userId: number | null
}

type ProductState = {
  products: Product[]
}

type RootState = {
  user: UserState
  product: ProductState
}

const userModule: StoreModule<UserState> = {
  state,
  mutations
}

const productModule: StoreModule<ProductState> = {
  state,
  mutations
}

// 在store/index.ts中匯入併合並模組
const store = createStore({
  modules: {
    user: userModule,
    product: productModule
  }
})

4.3 使用外掛與中介軟體

外掛：Vuex 提供了外掛機制，可以用來共享通用的功能，如日誌記錄、狀態檢查等。例如，vuex-router-sync 可以自動同步路由變化到 store。
中介軟體：在 mutations 或 actions 中使用 context 物件，可以新增全域性的中介軟體，如在每次修改 state 時執行某些操作。

// 新增全域性中介軟體
import createLogger from 'vuex-log'

const store = createStore({
  // ...
  middleware: [createLogger()]
})

4.4 子元件狀態通訊

子元件可以透過 store.dispatch 或 store.commit 與父元件或全域性 store 通訊。如果需要在子元件之間共享狀態，可以考慮使用自定義事件或者 Vuex 的 mapState 和 mapActions。

// 子元件
<template>
  <button @click="incrementChild">Increment Child</button>
</template>

<script setup>
import { useStore } from 'vuex'

const store = useStore()
const count = store.state.count // 使用mapState獲取狀態

function incrementChild() {
  store.dispatch('increment') // 使用store.dispatch呼叫action
}
</script>

透過這些最佳實踐，你可以更好地管理 Nuxt 3 中的狀態，提高程式碼的可讀性和可維護性。

第5章：Vuex 狀態管理進階

第6章：Vuex 3.x 新特性

第7章：Vuex ORM 與 Nuxt

第8章：Redux 與 Nuxt 的對比

第9章：其他狀態管理庫

第10章：實戰專案

餘下文章內容請點選跳轉至個人部落格頁面或者掃碼關注或者微信搜一搜：程式設計智域前端至全棧交流與成長，閱讀完整的文章：掌握 Nuxt 3 中的狀態管理：實踐指南 | cmdragon's Blog

Nuxt 3元件開發與管理 | cmdragon's Blog
Nuxt.js 深入淺出：目錄結構與檔案組織詳解 | cmdragon’s Blog**
友情連結 | cmdragon’s Blog**
安裝 Nuxt.js 的步驟和注意事項 | cmdragon’s Blog**
探索Web Components | cmdragon’s Blog**
Vue微前端架構與Qiankun實踐理論指南 | cmdragon’s Blog**
Vue 3深度探索：自定義渲染器與服務端渲染 | cmdragon’s Blog**
Tailwind CSS 響應式設計實戰指南 | cmdragon’s Blog**
Tailwind CSS 實戰指南：快速構建響應式網頁設計 | cmdragon’s Blog**
Vue 3與ESLint、Prettier：構建規範化的前端開發環境 | cmdragon’s Blog**
Vue TypeScript 實戰：掌握靜態型別程式設計 | cmdragon’s Blog**
Nuxt 3 路由系統詳解：配置與實踐指南 | cmdragon's Blog

Flutter 狀態管理實踐
2020-06-06
Flutter
nuxt3_使用pinia實現伺服器端渲染狀態管理
2024-04-16
UX伺服器
Nuxt 3 路由系統詳解：配置與實踐指南
2024-06-21
UX路由
Flutter實踐：深入 Flutter 的狀態管理方式(3)——旅途小結與Redux實踐
2019-02-09
FlutterRedux
Vuex 4與狀態管理實戰指南
2024-06-06
Vue
Flutter實踐：深入探索 flutter 中的狀態管理方式(1)
2019-01-31
Flutter
Super-Vuex 狀態管理最佳實踐
2018-06-08
Vue
Flutter | 狀態管理指南篇——Provider
2019-06-13
FlutterIDE
React新Context API在前端狀態管理的實踐
2019-02-28
ReactContextAPI前端
【架構設計】無狀態狀態機在程式碼中的實踐
2021-10-15
架構
Jetpack Compose(3) —— 狀態管理
2024-03-13
Jetpack
Nuxt 實踐
2018-04-09
UX
vue的狀態管理實現
2020-11-08
Vue
Flutter實踐：深入 flutter 的狀態管理方式(2)——演化BloC
2019-02-02
FlutterBloC
清除 Nuxt 狀態快取：clearNuxtState
2024-08-07
UX快取
掌握HarmonyOS框架的ArkTs如何管理和共享狀態資料
2023-11-30
框架
3xx HTTP狀態碼的終極指南
2023-01-10
HTTP
nuxt3 useFetch 如何做loadMore累加資料狀態
2024-05-07
UX
狀態管理框架開發不完全指南
2019-04-28
框架
JS手寫狀態管理的實現
2019-03-03
JS
nuxt快取實踐
2018-06-21
UX快取
iOS App稽核狀態和稽核時間管理指南
2024-01-30
iOSAPP
淺談前端的狀態管理，以及anguar的狀態管理庫
2023-03-11
前端
⚠️Flutter的狀態管理⚠️
2020-06-01
Flutter
React的狀態管理
2019-04-22
React
狀態管理
2024-11-08
Nuxt Kit 的使用指南：模組建立與管理
2024-09-11
UX
我理想中的狀態管理工具
2018-11-14
如何直觀的在JavaScript中管理狀態
2018-08-08
JavaScript
在Vue3中如何實現四種全域性狀態資料的統一管理？
2024-10-10
Vue
Nuxt 使用指南：掌握 useNuxtApp 和執行時上下文
2024-07-21
UXAPP
微服務實踐k8s&dapr開發部署實驗（2）狀態管理
2024-05-26
微服務K8S
全新的 Vue3 狀態管理工具：Pinia
2021-12-16
Vue
Web3開發中的狀態同步
2024-08-17
Web
RocketMQ 5.0：無狀態代理模式的探索與實踐
2022-10-10
MQ模式
前端狀態管理與有限狀態機
2018-10-15
前端
React 回憶錄（四）React 中的狀態管理
2018-07-19
React
React中的另一種狀態管理方案Valtio
2023-03-15
React