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文件里的action的axios要返回一个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,

Resolve(sss),

Reject(er)

}

)

a.then((sss) => {

Console.log(sss)

}).catach((er) => {

console.log(er)

})

猜你喜欢