监听来自 Vuex 商店的浏览器事件

Question

我想为我的 Vue 应用程序提供游戏手柄支持。我想听来自Gamepad API的事件。

我不想将这些侦听器附加到组件上，因为我必须全局处理它们。那么我应该在哪里附加这些听众呢？我是否应该将每个事件添加到App.vue组件中，因为它是应用程序的根？

我想用 Vuex 处理游戏手柄输入和状态。有没有办法可以通过操作（/或突变）直接监听浏览器事件？设置我的动作像......

export default {
  on_browser_gamepadconnected: ({ commit }, e) => {
    // do something
  },
};

Answer 1

制作你自己的 Vuex 插件

https://vuex.vuejs.org/guide/plugins.html

您的基本 Vuex 商店将如下所示。

const state = {
  humans_gone: false
}

const getters = {

}

const mutations = {
  markAsDestroyed(state, value){
     state.humans_gone = value
  }
}

const actions = {
  async destroyAllHumans({ commit, dispatch, state }, exceptMyFriends) {
    // Do stuff
  }
}

const plugins = [
  store => {
    window.addEventListener("gamepadconnected", async e => {
      await store.dispatch('destroyAllHumans', true)
      store.commit('markAsDestroyed', true)
      console.log(`If this is ${store.state.humans_gone}, then I am all done`)
    })
  }
]

export default {
  state,
  getters,
  mutations,
  actions,
  plugins
}