在 Vue 组件之外更改变量值的最佳方法

Question

我正在寻找在组件外部更改 Vue 变量值的最佳方法。我也在使用 Vue webpack 。

我已经使用 vue webpack 创建了一个项目。在其默认的 App.vue 文件中，我有一个变量。例如，让我们以 showModal 为例，它的默认值为 false 。然后我将它构建在一个 javascript 文件中。

 <button>Register</button> {{-- event button --}}
<div id="guest"></div> {{-- Here I'm rendering my template --}}

<script src="{{ asset('js/vue-js/guest.js') }}"></script> {{-- builded Javascript file --}}

问题是我想将 showModal 变量更改为 true ，但事件按钮不在我的组件模板上。

实现这一目标的最佳方法是什么？

原文由 bakis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

首先，最好的方法是考虑现有组件之间的关系以及它们之间的关系。因此，例如，如果您尝试传递的信息将用于直接兄弟或链的更下方，您可以选择 props 。

如果您处理的两个组件除了当前状态外没有任何直接关系，您将需要推断为使用存储库模式或 Vuex（类似状态管理库的通量），然后我们可以在其中传递对状态的引用或传递到存储库模式。

 FooRepository.js

export default class FooRepository {
  SomeRef
  ManyRef = []

  addRef(name) {
    this.someRef = name;
  }

  addRefs(names){
    this.ManyRef.push(names);
  }

}

以上内容可以在您的应用程序层中实例化，并使用实例属性在您的组件之间共享 https://v2.vuejs.org/v2/cookbook/adding-instance-properties.html

根据您的应用程序大小，可能是时候包含 Vuex 了，我们可以在其中直接将引用保存到我们的状态中，并以与 repo 模式类似的方式使用它。虽然它是官方支持的软件包，但设置和使用要简单得多：

 const store = new Vuex.Store({
  state: {
    ref: null
  },
  mutations: {
    saveRef (state, compRef) {
      state.ref = compRef
    }
  }
})

这是一个非常基本的商店，展示了我们如何将引用保存到其中，一旦我们在 main 中注册了商店，我们就可以在我们的组件中访问这个引用。这可以使用 this.$store.state.ref 来完成。这两种方法被认为是简单 props 的最佳方法，或者类似于没有直接关系的组件的事件发射器。

原文由 li x 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果你想在 vue 之外访问一个 vue 组件，你可以将它注册到 window 对象，然后从任何地方访问它。

 window.myVueComponent = new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

现在您可以从其他任何地方访问它

window.myVueComponent.myValue = 123

但这种“风格”之所以被称为全局命名空间污染，是有原因的。 ;)

我认为最好扩展您的 vue 应用程序，以便按钮也在 vue 处理的组件中。

原文由 Thomas 发布，翻译遵循 CC BY-SA 4.0 许可协议