vuex存储loading加载

  时间:2020-08-27 13:27:48  阅读量:883  评论数:0  作者:小鹿慢慢跑

小鹿慢慢跑分享了vuex存储loading加载,无论新手学习还是老手做项目,都可以参考其源码分析改造,是一篇有价值的文章。

1.loading.vue 

const loading = {
  state:{
    isLoading:false,
    showModal:true
  },
  mutations:{
    BEGIN_LOADING(state){
      state.isLoading = true
    },
    END_LOADING(state){
      state.isLoading = false
    },
    MODAL_LOADING(state){
      state.showModal = false
    }
  },
  actions:{
    beginLoading({ commit }){
      commit('BEGIN_LOADING')
    },
    endLoading({ commit }){
      commit('END_LOADING')
    },
    modalLoading({ commit }){
      commit('MODAL_LOADING')
    }
  }
};
export default loading

2.store/index.js引入:

import Vue from 'vue';
import Vuex from 'vuex';
import user from './user';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules:{
    user
  }
});
export default store

3.main.js引入store文件 :

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
...

//挂载
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

 

4.在数据接口请求封装中调用: 

import axios from 'axios';
import store from './store';
import router from './router'
axios.interceptors.request.use((config)=>{
   ......
  //携带token

  store.dispatch('beginLoading');
  return config
});
axios.interceptors.response.use((config)=>{

  ......
  store.dispatch('endLoading');
  //获取token,验证,跳转
  return config
})

 

关键词:存储,loading,加载