當前位置：首頁 > 前端技术 > vue >内容正文

vue

前端学习（2623）：Vuex初步识别

發布時間：2023/12/9 vue 48 豆豆

生活随笔收集整理的這篇文章主要介紹了前端学习（2623）：Vuex初步识别小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension

(opens new window)，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

讓我們從一個簡單的 Vue 計數應用開始：

new Vue({// statedata () {return {count: 0}},// viewtemplate: `<div>{{ count }}</div>`,// actionsmethods: {increment () {this.count++}} })

這個狀態自管理應用包含以下幾個部分：

以下是一個表示“單向數據流”理念的簡單示意：

但是，當我們的應用遇到多個組件共享狀態時，單向數據流的簡潔性很容易被破壞：

對于問題一，傳參的方法對于多層嵌套的組件將會非常繁瑣，并且對于兄弟組件間的狀態傳遞無能為力。對于問題二，我們經常會采用父子組件直接引用或者通過事件來變更和同步狀態的多份拷貝。以上的這些模式非常脆弱，通常會導致無法維護的代碼。

因此，我們為什么不把組件的共享狀態抽取出來，以一個全局單例模式管理呢？在這種模式下，我們的組件樹構成了一個巨大的“視圖”，不管在樹的哪個位置，任何組件都能獲取狀態或者觸發行為！

通過定義和隔離狀態管理中的各種概念并通過強制規則維持視圖和狀態間的獨立性，我們的代碼將會變得更結構化且易維護。

這就是 Vuex 背后的基本思想，借鑒了 Flux

(opens new window)、Redux (opens new window) 和 The Elm Architecture

(opens new window)。與其他模式不同的是，Vuex 是專門為 Vue.js 設計的狀態管理庫，以利用 Vue.js 的細粒度數據響應機制來進行高效的狀態更新。

如果你想交互式地學習 Vuex，可以看這個 Scrimba 上的 Vuex 課程

(opens new window)，它將錄屏和代碼試驗場混合在了一起，你可以隨時暫停并嘗試。

Vuex 可以幫助我們管理共享狀態，并附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。

如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗余的。確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 store 模式

(opens new window)就足夠您所需了。但是，如果您需要構建一個中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成為自然而然的選擇。引用 Redux 的作者 Dan Abramov 的話說就是：

以上是生活随笔為你收集整理的前端学习（2623）：Vuex初步识别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。