从外部 Vue 应用程序触发存储操作答案

【问题标题】：Trigger store action from outside vue app从外部 Vue 应用程序触发存储操作
【发布时间】：2019-12-16 17:59:59
【问题描述】：

我想在页面上的各个位置包括页面上其他地方的 Vue 组件之外的按钮，这些按钮通过单击事件触发商店操作。我的组件中有很多按钮，它们连接到v-on:click 之后的方法，然后通过this.$store.dispatch 触发存储操作。是否可以从 Vue 外部执行此操作？

【问题讨论】：

这是一个非常广泛的问题，缺乏细节。你试过什么吗？你有什么特别的问题吗？
理论上，如果您的Vuex.Store 实例可以在全局范围内可用，您可以直接在其上调用dispatch()，但我们甚至不知道您的应用程序是如何构建的，所以一切都只是猜测。
如何使商店可用？我阅读了有关导入它的信息，但我的其他处理点击事件的基本脚本并未编写为模块。
我知道它的范围很广，我很沮丧，因为我已经搜索了几个星期来寻找如何做这样的事情，但没有找到任何有希望的东西。我正在构建一个与 WordPress 网站集成的小型应用程序，以提供一些前端功能并与后端 CRM 插件集成，因此我不会编写一个单一的 SPA。
你已经在使用 Vue，为什么不使用 Vue？当你没有解释 Vue 对你的用例有什么问题时，很难想出替代方案。据我所知，您可以在 Vue.js 中制作按钮并添加点击处理程序。这就是你告诉我们你想做的所有事情。

标签： vue.js vuex

【解决方案1】：

要直接回答您的问题，您可以通过将 Vue 实例直接挂在 window 上来做您想做的事情，例如：

<div id="app">
  <p>{{ message }}</p>
</div>

window.IVue = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  store: new Vuex.Store({
    actions: {
      hello() {
        return Promise.resolve('Hello from the store!')
      }
    }
  })
})

window.IVue.$store.dispatch('hello').then((message) => {
  Vue.set(window.IVue, 'message', message)
})

And here's a jsFiddle

您会看到消息是来自商店的您好！

【讨论】：