狀態管理 vuex

Vuex使用

Vuex是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。html

安裝

能夠參考網址https://vuex.vuejs.org/zh/ins...
這裏我就不作多的介紹了。vue

概念

(1)state:單一狀態樹 ,每一個應用將僅僅包含一個 store 實例。
image.png
(2)getters:能夠從store 中的 state 中派生出一些狀態,getters的返回值會根據它的依賴被緩存起來,且只有當它的依賴值發生了改變纔會被從新計算。
image.png
(3)mutations:更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。
*常量的設計風格
[SOME_MUTATION] (state) {
// mutate state
}
*必須是同步函數
image.png
(4)actions:
image.pngios

模塊分割

因爲使用單一狀態樹,應用的全部狀態會集中到一個比較大的對象。當應用變得很是複雜時,store 對象就有可能變得至關臃腫。
爲了解決以上問題,Vuex 容許咱們將 store 分割成模塊(module)。每一個模塊擁有本身的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行一樣方式的分割:
image.png
module文件夾中每一個都是子store,在index.js文件中須要引入單個module下面的子store,同時須要在modules中寫入單個module,以下:
image.pngimage.pngvuex

namespaced: true的問題

在每一個單獨的module文件中,使用開啓命名空間
image.png
注意:
(1)應用層級的狀態應該集中到單個 store 對象中。
(2)提交 mutation 是更改狀態的惟一方法,而且這個過程是同步的。
(3)異步邏輯都應該封裝到 action 裏面。chrome

Vuex在項目中的使用

1. 非父子通訊問題
2. 異步數據快照,緩存後端數據,提升用戶體驗(單頁面中能夠減小請求後端數據)npm

1.非父子通訊問題

下面以一個簡單的module爲例
image.png
在這個userinfoModule中state中設置了一個usernamemutations中有一個setUsername方法,如今來看視圖中如何使用:
首先,username是須要在login時存入的,那麼在login頁面中須要經過import引入image.png
在login頁面的methods中解構
image.png,
userinfo是modules中的單個module的名字,setUsername是存在userinfoModule中的方法。那麼在用戶登陸成功的時候須要寫上this.setUsername(this.username);以下image.png,便可成功將此時登陸的username存入到userinfoModule,這是一個簡單的設置。
那麼如何在別的頁面使用這個username呢?下面舉個例子來完成一個簡單的非父子通訊問題:
首先在那個頁面使用username,就須要在頁面中經過import來引入image.png
在頁面的computed中經過解構的方法
...mapState("userinfo", ["username"]),image.png
就能夠在頁面中經過this.username來使用了。
以上是一個簡單的通訊問題axios

2. 異步數據快照,緩存後端數據,提升用戶體驗(單頁面中能夠減小請求後端數據)

下面簡單介紹一下如何在Vuex中請求數據並緩存數據,取用數據。
image.png
checkoutModule中,數據請求是寫在actions中的,其中有個方法store.rootState.userinfo.username,這個方法是單個module之間經過store.rootState來取值通訊的,rootState是根實例。在actions中設置一個名爲getCartList的方法,須要傳一個參數store,經過store.commint()將請求回來的數據經過setCartlist這個方法設置爲cartlist,此時cartlist中是須要的數據。下面咱們在別的頁面調用這個數據:
首先,本着在哪裏使用就要在哪裏引入的原則,先經過import導入image.png
而後在computed中解構image.png,那麼此時這個cartlist就能夠隨意使用了。後端

那麼,由於Vuex有緩存,若是數據須要變動,我須要在別的頁面再調用這個axios該怎麼辦呢?
首先須要import引入import { mapActions } from "vuex";
而後在methods中解構image.png
最後在哪裏須要調用數據請求直接image.png
就可讓axios從新請求一次了。此時獲得的數據就是最新的了。緩存

vue chrome devtools

image.png
能夠經過devtools來調試架構

持久化

vuex能夠進行全局的狀態管理,但刷新後刷新後數據會消失,這是咱們不肯意看到的。能夠結合本地存儲作到數據狀態持久化,也能夠經過插件vuex-persistedstate。插件的原理其實也是結合了存儲方式,只是統一的配置就不須要手動每次都寫存儲方法。
首先安裝cnpm i vuex-persistedstate --save
在store下的index.js中
能夠持久化全部state,也能夠指定須要持久化的state
image.png

什麼狀況下我應該使用 Vuex?

Vuex 能夠幫助咱們管理共享狀態,並附帶了更多的概念和框架。這須要對短時間和長期效益進行權衡。
若是您不打算開發大型單頁應用,使用 Vuex 多是繁瑣冗餘的。確實是如此,若是您的應用夠簡單,您最好不要使用 Vuex。一個簡單的store 模式就足夠您所需了。可是,若是您須要構建一箇中大型單頁應用,您極可能會考慮如何更好地在組件外部管理狀態,Vuex 將會成爲天然而然的選擇。引用 Redux 的做者 Dan Abramov 的話說就是:
Flux 架構就像眼鏡:您自會知道何時須要它。

以上,是我我的作出的一點總結,歡迎你們指正及討論感謝Vue做者及團隊!

相關文章
相關標籤/搜索