從外部Vue應用觸發商店動作

Question

我想在頁面上其他位置的Vue組件之外的頁面上的各個位置添加按鈕，這些按鈕可以通過click事件觸發存儲操作。 我的組件中有很多按鈕，它們在v-on:click之后連接到方法v-on:click ，然后通過this.$store.dispatch觸發存儲操作。 是否可以從Vue外部進行此操作？

Answer 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)
})

這是一個jsFiddle

您會從商店中看到消息“ Hello”！