vuex的学习笔记

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

 

以上是关于vuex的学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

学习笔记:python3,代码片段(2017)

Vue 学习总结笔记

vuex学习笔记

Vuex学习笔记1

vuex的学习笔记

vuex学习笔记