在 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，但它的事件按钮不在我的组件模板上。

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

Answer 1

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

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

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

window.myVueComponent.myValue = 123

但出于某些原因，这种“风格”被称为全局命名空间污染。;)

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

Answer 2

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

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

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 了，我们可以将引用直接保存到我们的状态中，并以与存储库模式类似的方式使用它。尽管它是官方支持的软件包，但设置和使用要简单得多：

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

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