javascript - 使用 CLI 模板时 Vue.js 中的全局变量

Question

我需要声明一个全局变量，该变量可以被我的 Vue.js 应用程序中的所有组件访问。所有组件都应该能够更改其值。我正在使用 CLI 模板。 有什么建议吗？

谢谢 迪亚·埃丁·阿纳布塔维

Answer 1

一般来说，在 vue 中，不可能/不建议直接更改父作用域中的属性。通信的方式是将 props 传递给子组件并将事件(可能带有值)发送给父组件(请参阅 Passing Data to Child Components with Props 和 Sending Messages to Parents with Events )。

如果您想要轻松访问全局状态，一种简洁的方法是使用 State Management 中描述的“存储”。 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 会为您提供更好的服务。 ，集中式状态管理的官方解决方案，更简单、更干净、更不易出错。