在 Nuxt 商店（vuex）中使用 window.open

Question

我正在使用 Nuxt.js，我想在 Vuex 商店中使用 window.open() 打开一个窗口模式。

这是我的商店代码：

export const state = () => ({
  popup: null
})

export const mutations = {
  openPopup (state, url) {
    state.popup = window.open(url, '', 'width=500,height=776')
    state.popup.addEventListener('beforeunload', this.closePopup)
  },
  closePopup (state) {
    if (state.popup) {
      state.popup.close()
      state.popup = null
    }
  }
}

问题是当我调用$store.commit('store-name/openPopup', item.url) 时，我收到以下错误：

（我在使用v-for 生成的元素中使用v-on:click 调用该函数，并且每个项目都有一个唯一的url）

RangeError: Maximum call stack size exceeded
    at _traverse (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2122)
    at _traverse (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2122)
    at _traverse (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2122)
    at _traverse (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2122)
    at _traverse (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2122)
    at _traverse (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2122)
    at _traverse (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2122)
    at _traverse (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2122)
    at _traverse (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2122)
    at _traverse (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2122)
_callee$ @ client.js?06a0:103

有谁知道这个错误的原因以及如何解决它？

Answer 1

您可以考虑另一种方法来解决您的问题，或者将其添加到您的 Vuex。

// store/index.js
export const strict = false

这会禁用 Vuex 的 strict mode。这意味着 Vuex 状态可以在突变之外发生突变。
注意： Nuxt.js 在生产环境中自动禁用严格模式，但在开发者模式中保持启用状态。如果您将这行代码添加到您的代码中，它会在开发人员模式下禁用严格模式。所以是安全的。

旁注：这行代码不会做任何事情：

state.popup.addEventListener('beforeunload', this.closePopup)

为什么？因为this.closePopup 不是函数。所以如果beforeunload 事件发生，closePopup 函数将不会被调用。要解决这个问题，请将那行代码替换为：

state.popup.addEventListener('beforeunload', this._mutations.closePopup[0])