vue+element 按钮Loading统一处理

vue 按钮Loading处理

1.按钮的loading效果可以处理后台响应时间有点长场景，这里使用store封装了下处理方式

// loading.js
import Vue from 'vue';
​
const loading = {
  state: {},
  mutations: {
    SET_LOADING: (state, data) => {
      const isObject =
        Object.prototype.toString.call(data) === '[object Object]';
      if (!isObject) return;
      Object.keys(data).forEach(key => {
        Vue.set(state, key, data[key]);
      });
    },
    CANCAL_LOADING: state => {
      Object.keys(state).forEach(key => {
        Vue.delete(state, key);
      });
    }
  },
  actions: {
    SetLoading({ commit }, data) {
      commit('SET_LOADING', data);
    },
    CancalLoading({ commit }, data) {
      commit('CANCAL_LOADING', data);
    }
  }
};
​
export default loading;
​
// http.js  请求方式
service.interceptors.response.use(
  response => {
    // 关闭全局按钮Loading响应
    store.dispatch('CancalLoading');
    ...
})

2.组件内定义

<el-button :loading="btn.save" @click="handleClick">保存</el-button>
​
computed: {
    btn() {
        return this.$store.state.loading;
    }
}
methods: {
    handleClick() {
        this.$store.dispatch('SetLoading', { save: true });    
    }
}

以上就可以完美的使用loading，而不用每个都在data中定义了。