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

Question

I'm using Nuxt.js and I want to open a window modal using window.open() in a Vuex store.

This is my store code:

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

The problem is that when I call $store.commit('store-name/openPopup', item.url) , I get the below error:

(I call that function with v-on:click in a element generate with v-for and every item has a unique 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

Does anyone know the cause of this error and how to fix it?

Answer 1

Either you can think of an another way to solve your problem or add this to your Vuex.

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

This disables Vuex's strict mode . That means Vuex state can be mutated outside of mutations.
Note: Nuxt.js automatically disables strict mode in production but keeps it enabled in developer mode. If you add this line of code to your code, it disables strict mode in developer mode. So it's safe.

Sidenote: this line of code won't do anything:

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

Why? Because this.closePopup is not a function. So the closePopup function won't be called if the beforeunload event occurs. To fix that, replace that line of code with this:

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