vuex的学习笔记

Posted 2020-10-04

组件调用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