在Vue中使用Vuex進行狀態管理指南

2021-08-13 11:05:41 字數 1087 閱讀 6832

1、vuex是什麼?

vuex 是乙個專為 vue.js 應用程式開發的

狀態管理模式

。它採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可**的方式發生變化。

2、為什麼需要vuex?vuex解決了什麼問題?

當我們的應用遇到多個元件共享狀態時,單向資料流的簡潔性很容易被破壞:

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

因此,我們為什麼不把元件的共享狀態抽取出來,以乙個全域性單例模式管理呢?在這種模式下,我們的元件樹構成了乙個巨大的「檢視」,不管在樹的哪個位置,任何元件都能獲取狀態或者觸發行為!

另外,通過定義和隔離狀態管理中的各種概念並強制遵守一定的規則,我們的**將會變得更結構化且易維護。

vuex 是專門為 vue.js 設計的狀態管理庫,以利用 vue.js 的細粒度資料響應機制來進行高效的狀態更新。

3、什麼時候使用vuex

如果您不打算開發大型單頁應用,使用 vuex 可能是繁瑣冗餘的。確實是如此——如果您的應用夠簡單,您最好不要使用 vuex。乙個簡單的 global event bus 就足夠您所需了。但是,如果您需要構建是乙個中大型單頁應用,您很可能會考慮如何更好地在元件外部管理狀態,vuex 將會成為自然而然的選擇。

4、怎樣使用vuex?

1、安裝vuex

2、建立src/store資料夾,資料夾下包含index.js state.js getters.js actions.js mutations.js mutations-types.js等檔案。

3、在main.js中匯入store.js中的vuex物件。

import store from 

'./store'

在根例項中註冊store選項

4、在index.js中new vuex.store()物件並匯出。參考模板書寫即可。

在元件中呼叫 store 中的狀態簡單到僅需要在計算屬性中返回。觸發變化也僅僅是在元件的 methods 中提交 mutation。

vue專案中使用vuex

import vue from vue import vuex from vuex import mutations from mutations import actions from actions import getters from getters import from utils au...

React和Vue進行狀態管理的區別

前端例項資料共享,vue有vuex而react則有redux,mobx等等。使用vuex進行狀態管理 我們現在vue專案,均採用vuex來做全域性的狀態管理,簡單的理解就是你在state中定義了乙個資料之後,你可以在所在專案中的任何乙個元件裡進行獲取 進行修改,並且你的修改可以得到全域性的響應變更,...

Vue狀態管理Vuex簡單使用

狀態管理儲存在store index.js中,簡單說明如下 import vue from vue import vuex from vuex vue.use vuex export default newvuex.store state成員操作,必須通過mutations操作state mutat...