vuex的學習筆記

組件調用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