vue(八)--vuex

Vuex

在這裏插入圖片描述

原型prototype,但這個不是響應式式:即原值改變,但引用處的值不會自動跟着改變

在這裏插入圖片描述

首先要使用npm安裝Vuex,接着再進行如下操作

vuex一般保存在store這個文件夾下
在這裏插入圖片描述

在main.js界面引用

在這裏插入圖片描述

在vue界面使用

在這裏插入圖片描述

通過mutations修改state的內容才能被devtools所監控,不要直接修改state的內容

在這裏插入圖片描述
在vue中使用mutations
在這裏插入圖片描述
在這裏插入圖片描述
在瀏覽器中安裝devtools後,就可以跟蹤狀態了
在這裏插入圖片描述
小總結
在這裏插入圖片描述

vuex的幾個核心概念

在這裏插入圖片描述

getters的使用類似於compute,可用於從store中獲取一些state變異後的狀態

在這裏插入圖片描述
在這裏插入圖片描述
在vue中進行使用
在這裏插入圖片描述

小技巧

在這裏插入圖片描述

調用getter的時候傳入參數

調用處
在這裏插入圖片描述
聲明處
在這裏插入圖片描述

Mutation狀態更新

在這裏插入圖片描述

Mutation攜帶參數

在這裏插入圖片描述
mutation攜帶參數與getter有區別,mutation的可以直接將參數寫在參數列表中而不需要再在內部調用一個function
在這裏插入圖片描述
在vue中調用
在這裏插入圖片描述

mutation的提交風格

在這裏插入圖片描述ODUwMA==,size_16,color_FFFFFF,t_70)
在這裏插入圖片描述
第二種風格,第二個參數已經是一個對象了
在這裏插入圖片描述

vuex數據的響應式

在這裏插入圖片描述
在這裏插入圖片描述

Mutation常量類型
在這裏插入圖片描述
注意事項
在這裏插入圖片描述

action

代碼實現
在這裏插入圖片描述
在vue界面使用action
在這裏插入圖片描述

action有回調結果的情況

action中
在這裏插入圖片描述
vue界面中
在這裏插入圖片描述

modules

在這裏插入圖片描述
代碼實現
在這裏插入圖片描述
在vue界面中使用
在這裏插入圖片描述

使用modules中的mutation

在這裏插入圖片描述
在vue中的使用方式跟普通mutation使用方式相同
在這裏插入圖片描述

使用modules中getter

在這裏插入圖片描述
在vue中的使用同普通的getter

使用modules中的action

在這裏插入圖片描述
在vue中的使用同普通的action
其中的context也包含了外層的getter和state

在這裏插入圖片描述

對象的解構

可以只解構其中的一部分數據
在這裏插入圖片描述

根據對象的解構,action也可以通過如下的方式使用

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章