Vue. js как отобразить загрузку при изменении маршрута с помощью Vue .observable - PullRequest
Новая
       5

Vue. js как отобразить загрузку при изменении маршрута с помощью Vue .observable

0 голосов
/ 12 февраля 2020

Я новичок для vuejs, теперь я хочу загрузить comp onet при изменении маршрута, но я не хочу использовать Vuex, я хочу использовать Vue.observable ， Я сделал как следует:

Мой store.js вот так: 

import Vue from 'vue'
export const store =  Vue.observable({isLoading: false});
export const mutation = {
  isLoaded ( is_loading ){
    store.isLoading = is_loading;
  }
}

Мой main.js вот так: 

import Vue from 'vue'
import App from './App'
import router from './router'
import VueAxios from 'vue-axios'
import VueMeta from 'vue-meta'

import { store, mutation } from './store'
import './commons/common_css/base.scss'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.min.css' // added
import 'bootstrap-vue/dist/bootstrap-vue.min.css' // added

Vue.use(BootstrapVue)
Vue.use(VueMeta)

Vue.config.productionTip = false

router.beforeEach(function (to, from, next) {
  mutation.isLoaded(true)
  next()
})

router.afterEach(function (to) {
  mutation.isLoaded(false)
})

Vue.use(VueAxios, {
  secured: securedAxiosInstance,
  plain: plainAxiosInstance
})

new Vue({
  router,
  securedAxiosInstance,
  plainAxiosInstance,
  components: { App },
  template: '<App/>',
}).$mount("#udask-content")

Мой App.vue вот так: 


<template>
  <div id="udask-content">
    <div id="udaskweb-header">
      <header_nav></header_nav>
    </div>
    <div class="main">
      <div id="udaskweb-loading">
        <loading v-if="is_loading"></loading>   
      </div>
      <div id="udaskweb-content">
        <router-view></router-view>
      </div>
    </div>
    <div id="udaskweb-footer"></div>
    <div id="udaskweb-pop" class="pop-messages"></div>
  </div>
</template>

<script>
  import HeaderNav from '@/components/commons/header_nav'
  import Loading from '@/components/commons/loading'
  import {store} from '@/store'
  export default {
    metaInfo () {
      return {
        title: 'app'
      }
    },
    name: "App",
    data (){
      return{
        is_loading: store.isLoading
      }
    },
    components: {
      'header_nav': HeaderNav,
      'loading': Loading
    },
  }
</script>

<style scoped>

</style>

Но я не могу динамить c получить store.isLoading, как мне быть?

Большое спасибо.

...