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

时间:2018-04-20 08:52:45

标签: javascript html vue.js vuejs2 command-line-interface

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

谢谢 Dhiaa Eddin Anabtawi

1 个答案:

答案 0 :(得分:0)

通常在vue中,不可能/建议直接更改父作用域中的属性。通信的方式是将props传递给子组件并将事件(可能带有值)发送给父母(参见Passing Data to Child Components with PropsSending Messages to Parents with Events)。

如果您想拥有易于访问的全局状态,那么干净的方法是使用vue指南的State Management章节中所述的“商店”:

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(集中式状态管理的官方解决方案)可以更好地服务,这种解决方案更容易,更清晰,更不容易出错。