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?
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])