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

Question

我正在使用 Nuxt.js 并且我想在 Vuex 商店中使用window.open()打开 window 模态。

这是我的商店代码：

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)时，我收到以下错误：

（我称之为 function 与v-on:click在一个元素中使用v-for生成，每个项目都有一个唯一的 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 的严格模式。 这意味着 Vuex state 可以在突变之外进行突变。
注意： Nuxt.js 在生产中自动禁用严格模式，但在开发者模式下保持启用。 如果您将这行代码添加到您的代码中，它会在开发人员模式下禁用严格模式。 所以是安全的。

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

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

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

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