vue 之 vuex了解與使用

vuex是乙個專為vue.js應用程式開發的狀態管理模式,並附帶了更多以的概念和框架,需要對短期和長期效益進行權衡

vuex的優點:方便的解決多元件的共享狀態

他是獨立於元件而單獨存在的,所有的元件都可以把它當做一座橋梁來進行通訊

特點:響應式的,只要資料修改了 ,所有用到該資料的地方,自動更新(資料驅動)

操作更簡潔,邏輯清晰

核心概念 

(1) state 狀態樹

vuex提出使用單一狀態樹,什麼是單一狀態樹,英文名稱是single source of truth  也可以翻譯為單一資料來源

(2) getters  攜帶 state引數

類似於計算屬性

(3) mutations 狀態更新  攜帶最多兩個引數,第乙個預設是state引數  (注意:不能寫非同步內容)

修改state的值肯定是在mutations中進行,引數被稱為是mutation的載荷(payload)

(4) actions  類似於mutation,

是用來替代mutation進行非同步操作的,可以解決mutation同步函式問題

(5) modules

1.因為使用單一狀態樹,也就意味著很多模組都會交給vuex來管理

2.當應用變得非常複雜時,store物件就會變得相當臃腫

3.為了解決該問題,vuex允許我們將store分割成模組,而每個模組擁有自己的state,mutations,actions,getters等

操作案例

注意點:

getters:

1.有乙個預設引數 state 

2.必須有乙個返回值

mutations:

1.最多兩個引數,第乙個預設引數是 state

2.在使用是,看是否有分模組,如果有模組,注意新增模組名

3.通過commit 進行呼叫,通過在actions中context.commit 去呼叫

擴充套件: 乙個模組中提交另乙個模組的mutation,加這個配置項

store.commit('

permission/setroutes
',,)
注意: 是傳過去的引數, 不是引數,僅僅作為配置項

1.最多兩個引數,第乙個預設引數是 context

非常注意點:這裡是處理非同步內容的,但是修改state的值,還是要在mutations中寫,通過context.commit('mutationns中的方法名')

2.通過dispatch進行呼叫

add-item.vue

class="

add">add內容
姓名:}
年齡:}
列表資訊:}
"addone
">加一歲
"addn
">加n歲
"addoneasync
">非同步加一歲

class="

sub">sub內容
姓名:}
年齡:}
資料列表:}
"subone
">加一歲
"subn(10)
">加n歲
"suboneasync
">非同步加一歲

export default

, addlist: [
10, 20, 30, 40
] },
getters: 
},mutations: ,
addn(state, n) 
},actions: , 
2000
); }
},namespaced: 
true
};

export default

, sublist: [
100, 200, 300, 400
] },
getters: 
},mutations: ,
subn(state, n) 
},actions: , 
2000
); }
},namespaced: 
true
};

/*

存放共享資料的倉庫 
1.匯入vue 和 vuex 並註冊
2.建立空的倉庫
3.匯出倉庫
4.掛載倉庫
*/import vue 
from
"vue";
import vuex 
from
"vuex";
import add 
from
"@/store/modules/add.js";
import sub 
from
"@/store/modules/sub.js";
vue.use(vuex);
//這裡是全域性
const store = new
vuex.store(
},//
mutations節點定義的是方法,這些方法是來修改state中的資料的,只能在mutations中修改
mutations: {},
/*actions節點中,這個節點中放的也是方法,這裡面的方法是處理非同步業務邏輯的
actions中的方法,引數一是context
action不能操作state中的資料,提交的是mutation,mutation修改state中的資料
---官網描述, action 提交的是mutation,而不是直接變更狀態,action可以包含任意非同步操作
*/actions: {},
/*getters 基於state中資料派生新的資料 
將getters理解元件中的計算屬性,寫法和計算屬性一模一樣(計算屬性是乙個函式,而且必須有返回值return)
*/getters: {},
modules: 
//在倉庫新增strict節點開啟嚴格模式,輔助開發,但是上線階段不開啟嚴格模式,開啟嚴格模式後會將state中的資料進行監聽
//strict: true,
});export 
default store;

"

">

Vue全家桶之vuex

目錄 簡化方法 模組巢狀 vuex原理剖析 vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態。它是響應式的。安裝vue add vuex使用 import vue from vue import vuex from vuex vue.use v...

Vue建立四 使用vuex

1 在vue專案的src目錄下建立store資料夾，建立index.js檔案 store index.js import vue from vue import vuex from vuex vue.use vuex const store new vuex.store mutations expo...

vue基礎之狀態管理vuex

vuex實現狀態管理 背景 vue狀態管理 如何引入vuex 1.新建index.js檔案，用來直接引用vuex import vue from vue import vuex from vuex 直接使用vuex vue.use vuex 建立vuex例項 const store new vuex...