使用VueJS Cli应该如何使所有页面共有一个变量并能够在页面中观看它

Question

我对VueJs来说还比较陌生，我被困在一个项目上，无法在线找到解决方案。

我想在所有页面（月）上使用一个变量，并且当该变量更改时，我希望能够在页面上执行某些操作。

我想做的事（简化）

在App.vue中

<div id="app">
    <div id="topBar">
      <div id="nav">
        <div><router-link to="/">Home</router-link></div>
        <div><router-link to="/expenses">Dépenses</router-link></div>
        <div><router-link to="/revenues">Revenus</router-link></div>
        <div><router-link to="/category">Categories</router-link></div>
      </div>
    </div>
    <select name="selectMonth" v-model="month" id="selectMonth" required>
        <option v-for="(month, index) in months" :key="index" :value=month>{{ month }}</option>
    </select>
    <router-view/>
  </div>

在Home.vue或任何其他页面中

watch: {
    month: function () {
      this.getExpenses() // or something else (In this case I want to fetch data again with a new month)
    }
  },

但是由于变量在app.vue上已更改，（无论我在哪个页面上，我都无法在页面上观看它。

你知道我应该怎么做？这种东西的最佳做法是什么？

先谢谢您能帮助我！

Answer 1

基于组件的UI框架（如Vue，React和朋友）实施了将数据向下传递到组件（Vue中的Props）的想法，但不允许这些组件通过简单地更改数据将对数据的更新传递给父级。相反，可以通过事件或使用诸如Vuex之类的状态管理器来传递对数据的更新。如果您正在寻找一种简单的方法来实现此目的，请查看$.emit：https://vuejs.org/v2/api/#vm-emit