Question

基本上我想全局loadingbar组件（包含在app模板中）这是我的loadingbar组件

<template>
    <div class="loadingbar" v-if="isLoading">
        Loading ...
    </div>
</template>

<script>
export default {
    name: 'loadingbar',
    props: ['isLoading'],
    data () {
        return {

        }
    }
}
</script>
<style scoped>
</style>

并且在main.js中，我已将此组件包含在

中

import LoadingBar from './components/LoadingBar.vue';
new Vue({
    router,
    data () {
        return {
            isLoading: true
        };
    },
    methods: {
    },
    created: function () {
    },
    components: {
        LoadingBar
    },
    template: `
        <div id="app">
            <LoadingBar :isLoading="isLoading"/>
            <router-view></router-view>
        </div>
    `
}).$mount('#app');

我的目标是根据变量isLoading的值显示加载组件。上面的代码工作正常。但我想使用来自其他组件的set isLoading变量（以便决定是否显示loading组件）。例如。在发布组件

中

<template>
    <div class="post container">

    </div>
</template>

<script>
export default {
    name: 'post',
    data () {
        return {
            posts: []
        }
    },
    methods: {
        fetchPosts: function() {
            // to show loading bar 
            this.isLoading = true;
            this.$http.get(APIURL+'listpost')
                .then(function(response) {
                    // to hide loading bar 
                    this.isLoading = false;
                    console.log("content loaded");
                });
        }
    },
    created: function() {
        this.fetchPosts();
    }
}
</script>
<style scoped>
</style>

粗略地说，我们无法直接从isLoading访问main.js所以我决定使用Mixin，因此我将以下代码放入main.js

Vue.mixin({
    data: function () {
        return {
            isLoading: false
        };
    }
});

然而，这允许我从任何其他组件访问isLoading，但我无法修改此变量。能帮助我实现这个目标吗？

注意：我知道我可以通过将loadingbar包含在单个组件中来实现这一目标（我尝试过它并且工作正常，但我不想这样做，因为每个组件都需要loadingbar所以我包括在主模板/组件中）

Answer 1

你可以这样使用Vuex：

// main.js 
import Vuex from 'vuex'
let store = new Vuex.Store({
  state: {
    isLoading: false,
  },
  mutations: {
    SET_IS_LOADING(state, value) {
      state.isLoading = value;
    }
  },
  getters: {
    isLoading(state) {
      return state.isLoading;
    }
  }
})

import LoadingBar from './components/LoadingBar.vue';
new Vue({
  router,
  store, // notice you need to add the `store` var here
  components: {
    LoadingBar
  },
  template: `
    <div id="app">
        <LoadingBar :isLoading="$store.getters.isLoading"/>
        <router-view></router-view>
    </div>
  `
}).$mount('#app');

// script of any child component
methods: {
  fetchPosts: function() {
    // to show loading bar 
    this.$store.commit('SET_IS_LOADING', true);
    this.$http.get(APIURL+'listpost')
      .then(function(response) {
        // to hide loading bar 
        this.$store.commit('SET_IS_LOADING', false);
        console.log("content loaded");
      });
  }
},

如何从vuejs

1 个答案: