1 vuex的安裝
npm i vuex -S
or
npm install vuex@(指定版本) -S
2 vuex的使用
2.1 vuex的核心模塊:
State: 單一的靜態(tài)樹, 可以理解為定義屬性;
Getters: 狀態(tài)獲取,可以對(duì)state中的數(shù)據(jù)進(jìn)行處理后,再返回; 可以理解成取值,類似get方法;
Mutations: 觸發(fā)同步事件,用于修改state中的值;
Actions: 用于處理異步請(qǐng)求, 再觸發(fā)mutations中的同步方法,修改state中的數(shù)據(jù);
Module: 將vuex進(jìn)行模塊化管理;一般用于大型項(xiàng)目,使vuex中的數(shù)據(jù)結(jié)構(gòu)更加清晰;
2.2 vuex的使用:
-
項(xiàng)目目錄結(jié)構(gòu)
image.png -
state.js 中定義的基本數(shù)據(jù)
image.png -
getters.js 中對(duì)state中聲明的數(shù)據(jù)可進(jìn)行進(jìn)一步的邏輯處理
image.png -
mutations.js 中定義方法對(duì)state中的數(shù)據(jù)進(jìn)行修改
image.png -
actions.js 處理異步請(qǐng)求,然后通過觸發(fā)mutation中定義的同步方法修改state值;
image.png -
modules: vuex中管理的數(shù)據(jù)過多時(shí),可以通過modules模塊的方式對(duì)需要全局管理的數(shù)據(jù)進(jìn)行模塊化管理
模塊化示例1.png
模塊化示例2.png -
頁面中的使用示例
image.png
2 注意事項(xiàng)
- 頁面刷新,vuex的數(shù)據(jù)會(huì)丟失; 可以通過安裝 vuex-persistedstate插件解決;
- 如果state,getters,mutations,actions中的生命的方法或變量與modules中的方法或變量重名的話,會(huì)出現(xiàn)異常,一般通過namespaced解決;
參考文檔
vuex
Vuex ——詳細(xì)介紹
Vue之Vuex
VEX的Modules的使用
namespaced解決vuex中命名沖突
