使用 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会更好地为您服务，这是集中状态管理的官方解决方案，它更容易、更清洁且不易出错。