时间戳

首页 > 解决方案 > 从外部 Vue 应用程序触发存储操作

vue.js - 从外部 Vue 应用程序触发存储操作

问题描述

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

标签： vue.jsvuex

解决方案

要直接回答您的问题，您可以通过将 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)
})

这是一个jsFiddle

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

推荐阅读