VUEX
是一個狀態管理模式，可以集中式存儲和管理組件的狀態。
組件使用store里面的state作數據展示，通過dispatch action來處理異步業務邏輯，然后commit mutations處理同步業務邏輯并且更新state。
Store
const store = {
state,
mutaions,
getters,
actions,
modules
}
State
通過在跟組件中注冊store，即new Vue({store})，該store實例會注入到根組件下的所有子組件中，子組件通過this.$store.state去訪問屬性。
// 可以通過mapState來幫我們生成計算屬性
import { mapState } from 'vuex'
export default {
computed:{
aaa,
// 自己本來有computed的屬性
...mapState({
count:state => state.count,
// 也可以傳 'count' 等同于 'state => state.count'
'count'
}),
...mapState([
'xxx',
'yyy'
])
}
}
Getters
當多個組件需要一種清洗和過濾后的數據的時候，可以編寫getters，即處理數據格式的一種方法。
// 定義一個getters，里面有個sum
const getters = {
// 也可以接收一個getters作為參數
sum:( state,getters ) => {
return state.a + state.b;
}
}
// 使用getters
computed:{
// 同樣使用拓展運算符將 getters 混入 computed 對象中
xxx,
...mapGetters([
'aaa',
'bbb'
])
}
Mutations
更改Vuex中的state狀態的唯一方法是commit mutation，然后在mutation中操縱state改變狀態。
// 定義
const mutations = {
// 可以傳入額外的參數n
[ADD](state,obj){
state.count += obj.n;
}
}
// 一般使用常量替代 mutation 事件類型
const ADD = 'ADD'
//調用,type對應方法名， 或者commit('add',10)
store.commit({
type:'add',
n:10
})
mutation必須是同步函數，也就是說所有異步請求應該都放在action中
// 使用
export default {
methods:{
...mapMutations([
// 映射 this.aaa() 為 this.$store.commit('aaa')
'aaa'
])
}
}
Action
action類似mutation，但是action是commit mutation，而不是直接改變狀態，并且action可以進行異步操作。
const actions = {
//這里需要注意，入參的context是一個modules，不是Store，有store實例的相同方法和屬性
aaa(context,n){
// 在action中提交一個type為aaa的mutation
context.commit({type:'mutation',n:n})
}
}
// 調用
store.dispatch({type:'aaa',n:10}); //dispatch('aaa',n)
// 使用
export default {
methods:{
...mapActions([
// 映射 this.aaa() 為 this.$store.dispatch('aaa')
'aaa'
])
}
}
Modules
一個很大的單頁項目，如果所有狀態都集中在一個Store上，那么這個Store就會很大，所以將store分割模塊，每個模塊擁有自己的state,mutation,action,getters.
const moduleA = {
state,
actions,
mutations
}
const moduleB = {
state,
actions,
mutations
}
const Store = new Vuex.Store({
modules:{
moduleA,
moduleB
}
})
Store.state.moduleA // -> moduleA 的狀態
規則
- 應用層級的狀態應該集中到單個 Store 對象
- 提交 mutation 是更改狀態的唯一方法，并且這個過程是同步的
- 異步邏輯都應該封裝到 action 里面
- 對大型項目，需要把 Vuex 相關代碼分割到模塊中
