Vue2 0 實戰專案六 Vuex

最近進入了乙個新專案組，前端框架選擇vue進行開發，資料的狀態管理選擇用vuex。本篇隨筆中的**採用vuex官網提供的購物車案例。

├── index.html ├── main.js ├── api │ └── shop.js # 抽取出api請求 ├── components │ ├── cart.vue # 購物車元件 │ └── productlist.vue # 產品元件 │ └── store ├── index.js # 我們組裝模組並匯出 store 的地方 ├── actions.js # 根級別的 action ├── mutations.js # 根級別的 mutation ├── mutation-types.js # mutation事件型別 └── modules ├── cart.js # 購物車模組

└── products.js # 產品模組

vuex有五個核心概念，分別是：state、getter、mutation、action和module

由於vuex的狀態儲存是響應式的，所以從store例項中讀取狀態最簡單的方式是在計算屬性中返回某個狀態


const state = ,]
}export default


import store from '../store/index'

當乙個元件需要獲取多個狀態時，可以通過mapstate輔助函式幫助我們生成計算屬性

//改造productlist.vue
import from 'vuex'
export default */
})}

如果計算屬性名和state子節點名字相同，也可以傳遞乙個字串陣列

computed: mapstate([
// 對映 this.all 為 store.state.all
'all'
])

如果想要與區域性計算屬性混合使用，則可以通過物件展開運算子做到這一點

computed: ,
// 使用物件展開運算子將此物件混入到外部物件中
...mapstate()
}

getter相當於store例項的計算屬性，getter的返回值會根據它的依賴被快取起來，只有依賴發生改變，才會重新計算。

getter接受state作為第乙個引數，其他的getter作為第二個引數，同時也會暴露為store.getters物件


const getters = 
export default


computed: 
}

同樣，getter也有輔助函式mapgetters，它的作用是將store中的getter對映到區域性計算屬性，使用方法與mapstate一樣。

更改 vuex 的 store 中的狀態的唯一方法是提交 mutation。

每個 mutation 都有乙個字串的事件型別 (type) 和乙個**函式(handler)。這個**函式就是我們實際進行狀態更改的地方，並且它會接受 state 作為第乙個引數，通過store.commit可以傳遞第二個引數，也就是載荷(payload)

// project.js
// 可以使用常量代替mutation事件型別
const mutations = ) ,
[types.add_to_cart] (state, ) 
}// actions
const actions = ) )
})}}

// mutation-types.js
export const add_to_cart = 'add_to_cart'
export const receive_products = 'receive_products'

mutation也有輔助函式mapmutations

import  from 'vuex'
export default )
}}

mutation必須是同步函式,如果想包含非同步操作，那麼必須要使用action

action和mutation有兩點不同：

actions: ) 
}

action通過store.dispatch方法觸發

store.dispatch('getallproducts')

在元件中分發action，我們可以使用mapactions輔助函式將元件的methods對映為store.dispatch呼叫，使用方法同mapmutations。

由於使用單一狀態樹，應用的所有狀態會集中到乙個比較大的物件。當應用變得非常複雜時，store 物件就有可能變得相當臃腫。

為了解決以上問題，vuex 允許我們將 store 分割成模組（module）。每個模組擁有自己的 state、mutation、action、getter、甚至是巢狀子模組——從上至下進行同樣方式的分割：

const modulea = ,
mutations: ,
actions: ,
getters: 
}const moduleb = ,
mutations: ,
actions: 
}const store = new vuex.store(
})store.state.a // -> modulea 的狀態
store.state.b // -> moduleb 的狀態

預設情況下，模組內部的action、mutation、getter是註冊在全域性命名空間的，如果需要模組被更好的封裝，那麼可以通過新增namespaced: true的方式使其成為命名空間模組

啟用了命名空間的 getter 和 action 會收到區域性化的getter，dispatch和commit。

Vue2 0 實戰專案六 Vuex

vue 2 0 的專案配置

vue2 0入門及實戰開發一

vue2 0入門及實戰開發四

Vue2 0 實戰專案 六 Vuex

vue 2 0 的專案配置

vue2 0入門及實戰開發 一

vue2 0入門及實戰開發 四

相關推薦

Vue2 0 實戰專案六 Vuex

vue2 0入門及實戰開發一

vue2 0入門及實戰開發四