新手上路通过vuex使用loading.有很多不足.第一次写博客~

最近开始想学vuex.但是看了几篇文章.感觉掐头去尾.作为纯小白的我..留下了泪水*(是真的菜鸡).. 话不多说直接上代码

1.首先我是用的vue.在store里面新建了一个store.js.注册一个module来保存状态.state里面的isLoading是控制loading显示的方法.我们把他设置为false,export default store是把他曝光出去让外面使用

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({})
store.registerModule('vux', { // 名字自己定义
  //页面一开始加载的时候通过ajax等异步方法获取到的后台数据存放在store中
  state: {
    isLoading: false
  },
  mutations: {
    updateLoadingStatus (state, payload) {
      state.isLoading = payload.isLoading
    }
  },
  //actions是用户点击一个按钮触发一个方法时就要经过这个actions,actions里面通过commit让mutaions执行相应的方法，只有mutations才能改state！
  actions:{

  },
  //getters就是将state里的某些属性给到components那里进行渲染
  getters:{

  }
})
export default store

 

2. 接下来我在app.vue里面使用.通过mapstate方法.拿到loading里面的状态

import { mapGetters } from 'vuex';
import { Loading } from 'vux'
import { mapState } from 'vuex'
export default {
  name: 'app',
  data(){
    return{
      
    }
  },
  methods:{

    }
  },
  created(){
     
  },
  components:{
    Loading
  },
  computed:{
    
    ...mapState({
      isLoading: state => state.vux.isLoading
    })
  },
}

3.接下来在main.js引入这个store.js然后在路由前置配置里面做判断,

import store from './store/store'
router.beforeEach(function (to, from, next) {
    store.commit('updateLoadingStatus', {isLoading: true})
    next()
  })

4.接下来在接口处调用就ok了~

      this.$http.post('/home/buddhism/index').then(response =>{
        if(response.msg = "SUCCESS"){
          this.$store.commit('updateLoadingStatus', {isLoading: false})
          this.Indexlist  = response.data.data;
        } 
      })