在 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（类似通量的状态管理库），然后我们可以将引用传递给状态或传入存储库模式中的属性。

FooRepository.js

export default class FooRepository {
  SomeRef
  ManyRef = []

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

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

}

以上内容可以在您的应用层中实例化，并使用实例属性https://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
    }
  }
})

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

Answer 3

创建一个新的 Vue 实例仅用于发射，称之为全局事件管理器。

global.event = new Vue()

当你想发出一个事件时（比如模态）

global.event.$emit('close-modal', (optional msg))

当你想关闭模式时：

// 在你的组件中

created(){
    var App = this;
    global.event.$on('close-modal', (optional msg)=>{
         this.showModal = false;
    })
}

类似地打开模态。如果您使用的是 vue CDN（vue 的普通 js 文件），请在创建时使用 window.event 而不是 global.event，而在使用时仅使用 event。在浏览器中，如果使用了未声明的变量，则它引用了窗口对象。