Question

我正在使用Vue js开发一个用于学习目的的简单Web应用程序。我是Vue JS的新手，刚刚开始学习Vue。我现在正在做什么，我正在尝试为所有组件共享一个状态变量，如此链接https://forum.vuejs.org/t/how-set-global-state-available-to-all-components/5947所示。但是，状态不能从其他组件中修改。这是我的代码。

我使用此定义为全球商店创建了一个文件

<script>
    import Vue from 'vue';

    export const globalStore = new Vue({
        data: {
            numOfViewers: 0
        }
    })
</script>

我正在像这样的名为Header的组件中使用globalStore的numOfViwers

<template>
  <header class="app-header navbar">
    <b-nav is-nav-bar class="ml-auto">
      <div class="watching">
        <span class="watching-num"><i class="fa fa-eye"></i> {{ numOfViewers }}</span>
        <span class="watching-label">Watching now</span>
      </div>
    </b-nav>
  </header>
</template>
<script>
  import { globalStore } from '../GlobalStore';
export default {
  name: 'header',
    data(){
      return {
        numOfViewers : globalStore.numOfViewers
      }
    },
    //other code
}
</script>

然后，我试图从另一个这样的组件中修改Header组件中的值。

我这样将globalStore导入了仪表板组件中

import { globalStore } from '../GlobalStore';

在组件的mount（）事件中，我这样修改值

globalStore.numOfViewers = 100;

但是Header组件中的数据值未修改。我该如何运作？

Answer 1

将numOfViewers移至computed应该会有所帮助：

computed: {
  numOfViewers() { return globalStore.numOfViewers; }
}

共享的全局变量/存储在Vue JS中不起作用

1 个答案: