在 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) 时，出现以下错误：

（我在用 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])

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

Use window.open in a Nuxt store (vuex)

javascript

node.js

vue.js

vuex

nuxt.js