Vuejs2 如何将属性从vuejs中的其他组件传递到main.js中使用的组件

基本上，我想要一个

loadingbar

组件（包含在应用程序模板中） 这是我的

加载栏

组件

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

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

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

我的目标是根据变量

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

，但我无法修改此变量。有什么能帮我做到这一点吗

注意：我知道我可以通过在单个组件中包含

loadingbar

来实现这一点（我尝试过，效果很好，但我不想这样做，因为每个组件中都需要

loadingbar

，所以我将其包含在主模板/组件中）

你可以这样使用：

---

我想我应该用第二种方法，但是为什么我们必须用第二种方法通过

store

（在网上

store，//注意你需要在这里添加
store`var`）；在本例中没有定义，您不需要在复制/粘贴时忘记将其取出。现在编辑是的，我也尝试了同样的方法，它显示了正确的值，但是如果在main.js中尝试相同的方法，则不包括
加载栏
（设置
this.$isLoading=true；
之前
$http.get
调用，然后设置
this.$isLoading=false；
之后），它设置了正确的值。但是再次显示
加载栏
，但在通过
$http.get
获取数据后不会隐藏。我认为Vue无法观察对象原型，嗯，我不确定为什么这不起作用，我可以稍后再研究。现在，我已经编辑了我的帖子，其中包含了我知道会奏效的解决方案。
<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>

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

// 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');