vue20180516

vuex+axios+echarts饼图实现

一、先在beforeCreate里分发store.js里的Action,分发完之后就取到store.js里饼图的数据,取到之后就开始画图init charts

.vue文件

beforeCreate() {
  // 先拿到series
  this.$store.dispatch('indstrlAction').then((resolve) => {
    // 再拿到series[0].data
    this.series[0].data = this.$store.state.customer_indstrlStore.indstrlSeriesData
  }).then((resolve) => {
    // 再init charts
    this.indstrlDraw(this.series)
  })
}

二、重点:要设置store.js里的axios同步执行

Store.js文件里的actionaxios要返回一个promise,只有当resolve()上面的代码执行吗才可以执行调用这个ation方法.then(),这样就保证了可以拿到数据;

actions: {
  // 封装一个 ajax 方法,请求客户列表信息
  indstrlAction(context) {
    // console.log('store里的执行了请求行业分布的ajax')
    return new Promise((resolve, reject) => {
      axios({
        method: 'post',
        url: 'http://mock.iai.oa.com/mock/5aeab446e54e882edaf2bc20/api/customer/indstrlDist'
      }).then((res) => {
        // console.log('store.js里获取行业分布数据2222222222222222222res.data.data=', res.data.data)
        var iDdataSource = res.data.data
        var iDtableDataSource = []
        for (let i = 0; i < iDdataSource.length; i++) {
          iDtableDataSource.push({
            name: iDdataSource[i].indstrl_name,
            value: iDdataSource[i].number
          })
        }
        // console.log('store.js里的iDtableDataSource==', iDtableDataSource)
        context.commit('indstrlMutation', iDtableDataSource)
        resolve();
      }).catch(error => {
        // console.log('出现错误', error)
        throw error
      })
    })
  }
}

 

 

示意图:

a = new Promise((resolve,reject) =>

  {

Xxx,

Xxx,

Resolve(sss),

Reject(er)

  }

)

a.then((sss) => {

  Console.log(sss)

}).catach((er) => {

  console.log(er)

})


阅读更多
个人分类: VUE promise
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

vue20180516

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭