tar .com agen patch context roo pes types ets

組件調用dispatch方法通知action，意思是執行action下的一個方法

例
var pageNum = this.pagination.current_page
this.$store.dispatch(‘All_getSetting‘, pageNum - 1) // 這裏帶了一個頁碼參數執行了action下的All_getSetting方法

import Api from ‘../api‘
const action = { 

　　/*查詢所有設置數據*/
　　All_getSetting (context, param = {pageNum: 0}) { //content是默認的參數，是store的實例，context.state即可獲取state屬性，param自定義參數對象，默認屬性pageNum即頁碼為0
　　　　var data = {
　　　　　　　accountName: context.state.query.account.name //獲取賬號名稱
　　　　}
　　　　data = Object.assign(data, publicData(context, param.pageNum)) //傳遞的參數，這裏使用了 Object.assign 深度復制，類似JQ的extend
　　　　context.commit(‘LOADING_OPEN

‘) // 觸發mutation下的方法，改變loading狀態，打開loading層
　　　　Api.getAllSettingList(data, function (respond) { //api 對象下該模塊獲取數據的方法
　　　　　　context.commit(‘LOADING_CLOSE‘) // 加載成功 觸發mutation下的方法，改變loading狀態，關閉loading層
　　　　　　context.commit(types.ALL_GET_SETTING, respond) // 將響應data提交給mutation，意思是執行mutation下的一個方法
　　　　}, function (error) {
　　　　　　context.dispatch(‘Root_errors‘, error) // 加載失敗 dispatch到action下，將錯誤響應傳過來，觸發mutation下的方法，改變loading狀態，關閉loading層
　　　　})
　　 }
}

/*將後端Api接口全部放在一個vue文件中是為了將所有數據接口放在同一個文件統一管理 */　　
　　export default {
　　　　getAllSettingList (argus = {}, successCallback = () => {}, errorCallback = () => {}) {
　　　　Vue.http.post(‘/am/setting/list‘, argus, {timeout: timeout}).then(response => {
　　　　 successCallback(response.body) //對應上面的成功處理
　　　　}, response => {
　　　　errorCallback(response.body) //對應上面的失敗處理
　　　　})
　　　　},　　
　　}

/*將Root_errors方法放在跟級別的action下 是為了做一個全局錯誤處理*/　　
　　Root_errors (context, error) {
　　context.commit(‘LOADING_CLOSE‘) //在全局關閉加載錯誤之後的loading
　　context.commit(types.MODAL_OPEN, { //在全局控制錯誤彈框樣式
　 　　type: ‘error‘,
　　content: error,
　　 btn: false,
　　width: 250,
　　height: 120
})
}

終於到了mutation這一步，改變狀態，展示數據，就成功了

const mutations = {
　　[types.ALL_GET_SETTING] (state, argus) { //之前action下成功加載的commit方法
　　// 判斷argus（即傳過來的respond）是否為空
　　if (argus == null || argus.length <= 0) argus = []
　　state.settingData = argus //不為空則把數據給state下的settingData
　　},

}

這下讓我們看看settingData怎麽用的吧

const state = {
　　settingData: [] //預定義的值是空值，經過上面一系列的步驟，已經有值了
}

/*html*/
<tr v-for="item in AllModule.settingData">
<td>{{item.start}}</td>
<td>{{item.end}}</td>
<td>{{item.deliveryTime}}</td>
</tr>

/*組件調用*/
export default {
name: ‘setting‘,
components: {
},
computed: {
AllModule () {
return this.$store.state.settingData
}

這樣就可以展示數據了，各種事件處理還要結合vue的生命周期的鉤子函數，避免出現各種BUG

vuex的學習筆記