vue.js - Vue.js 如何在使用 Vue.observable 更改路由时显示加载
问题描述
我是vuejs的新手,现在想在路由改变时获取加载组件,但我不想用户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>
但是我不能动态得到store.isLoading
,我该怎么办?
非常感谢。
解决方案
推荐阅读
- angular - 如何在主机上部署 Angular + Laravel 应用程序?
- kotlin - Kotlin 中具体化泛型的重载解决方案
- flutter - 如何将资产列表编码为 base64 并在颤动中解码?
- c# - asp.net core 3.1 中的 Telegram bot 在更新对象中没有提供任何数据
- python - numpy 可能表现不佳的原因?
- java - Freemarker - 如果其他条件不起作用
- html - PostgreSQL -> PSQL - 关闭 html 中的表转义
- windows - 如果另一个程序启动,则自动关闭一个程序
- javascript - 谷歌广告脚本
- python - 使用带有变量的 re.findall 从字符串中提取精确的短语数学