Vue.js如何使用Vue.observable显示路线更改时的装载

我是vuejs的新手，现在我想在路由更改时加载componet，但我不想使用

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;
  }
}

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")

我的

main.js

如下：

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

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.isLoading
，它将作为
此.root.isLoading
在您的组件中提供，并确保您在根Vue实例的数据部分定义
isLoading
。我将尝试您的方法，非常感谢@IVOGELOV