从 .js 文件 vuejs 访问组件

Question

我正在使用：https://www.npmjs.com/package/vue-loading-overlay

我的main.js 文件如下所示：

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

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

还有 App.vue：

<template>
  <div id="app">
    <loading
        :active.sync= "isLoading" 
        :can-cancel= "false" 
        :is-full-page= "false">
    </loading>
    <router-view></router-view>
  </div>
</template>

<script>
//import Vue from 'vue';
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

//Vue.use(Loading);

export default {
    data() {
            return {
                isLoading: true
            }
        },
  name: 'App',
  components: {
    Loading
  }
}
</script>

<style>
</style>

这似乎工作正常，但我如何从main.js 操纵isLoading 为真或假？我可能会在 main.js 中构建一个函数或其他东西以供将来使用，而不是在每个视图页面上都有 <loading>，我希望能够以某种方式全局控制它。

Answer 1

我没有对此进行测试，但根据我评论中引用的答案，这可能有效：

main.js

new Vue({ 
    el: '#app',
    props: ['isLoading'], 
    components:{App}, 
    template: '<App v-bind:isLoading="true">' 
})

您必须将 isLoading 设置为 App.vue 中的道具。上面的 v-bind 部分应该使 prop 反应。

另外，您可以创建一个总线并将事件从 main.js 发送到 App.vue，然后相应地更新 isLoading。

Answer 2

你应该使用 store。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

let store = new Vuex.Store({
    state: {
        isLoader: false,
    },
    getters: {
        isLoader(state) {
            return state.isLoader
        },
    },
    mutations: {
        isLoader(state, status) {
            state.isLoader = status
        },
    },
    actions: {
        isLoader({commit}, status) {
            commit('isLoader', status)
        },
    }
})

在您的应用程序的任何地方，您都可以使用 dispatch 将 isLoader 设置为 true

vue.$store.dispatch("isLoader", true/false);