使用 CLI 模板時 Vue.js 中的全局變量

Question

我需要聲明一個全局變量，我的 Vue.js 應用程序中的所有組件都可以訪問該變量。 所有組件都應該能夠更改其值。 我正在使用 CLI 模板。 有什么建議么？

謝謝 Dhiaa Eddin Anabtawi

Answer 1

一般來說，在 vue 中，不可能/不建議直接更改父范圍內的屬性。 通信發生的方式是將道具傳遞給子組件並將事件（可能帶有值）發送回父組件（請參閱使用道具將數據傳遞給子組件和使用事件向父組件發送消息）。

如果您想輕松訪問全局狀態，一種簡潔的方法是使用“存儲”，如 vue 指南的狀態管理一章中所述：

var store = {
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    this.state.message = newValue
  },
  clearMessageAction () {
    this.state.message = ''
  }
}

...

var vm = new Vue({
  ...
  data: {
    sharedState: store.state
  }
  ...
})

然后您可以使用this.$root.$data.sharedState訪問全局狀態，例如使用this.$root.$data.sharedState.message讀取消息或store.setMessageAction()修改它（假設您是導入store符號）。

也就是說，在這一點上，使用vuex會更好地為您服務，這是集中狀態管理的官方解決方案，它更容易、更清潔且不易出錯。