window is not defined using vuex-persist and NUXT

[warheartvik]

Hello,

I followed the instructions on https://www.npmjs.com/package/vuex-persist. But I got 'window is not defined' error. I'm using nuxt and typescript.

Nuxt Config: { src: '~/plugins/vuex-persist.ts', ssr: false },

~/plugins/vuex-persist.ts: import VuexPersistence from 'vuex-persist'

export default ({store}) => { if (process.client){ return new VuexPersistence({ storage: window.localStorage }).plugin(store); }

} ~/store/index.ts import Vue from 'vue'; import Vuex from 'vuex'; import VuexPersistence from 'vuex-persist'; Vue.use(Vuex);

const vuexLocal = new VuexPersistence({ storage: window.localStorage })

export default () => new Vuex.Store({ state: { authUser: null, token: process.client ? localStorage.getItem('token') : null },

mutations: { set_user: function (state, user) { //@ts-ignore state.authUser = user; }, set_token (state, token){ //@ts-ignore state.token = token; } },

actions: { async iniciarSesion ({ commit }, datosUsuario) {

  commit('set_user', datosUsuario.usuario);

  if (process.client){
    localStorage.setItem('token', datosUsuario.token);
  }

  commit('set_token', datosUsuario.token);
}, //iniciar sesion final del metodo

}, getters: { user (state) { //@ts-ignore return state.authUser;

}

},

plugins: [vuexLocal.plugin] });

[kpturner]

Bit difficult to follow ^^ because you haven't formatted the code as this is code above, but anyway I was looking to use this plug-in with Nuxt (typescript) also but I am a bit reticent until you get an answer. Obviously window.anything isn't going to fly when executed server side. It does beg the question for me as somewhat of a n00b as to where the store exists on the server-side anyway. Clearly when server-side rendering is taking place the vuex store can be accessed and populated but I have no clue how it is synced between the client and the server.

[championswimmer]

Use it as a client only plugin, as shown in README

Yes the store values can only be used in a hydrated app (one that has become reactive after loading on the frontend)

On Tue 18 Dec, 2018, 10:14 PM Kevin Turner <notifications@github.com wrote:

Bit difficult to follow ^^ because you haven't formatted the code as this is code above, but anyway I was looking to use this plug-in with Nuxt (typescript) also but I am a bit reticent until you get an answer. Obviously window.anything isn't going to fly when executed server side. It does beg the question for me as somewhat of a n00b as to where the store exists on the server-side anyway. Clearly when server-side rendering is taking place the vuex store can be accessed and populated but I have no clue how it is synced between the client and the server.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/championswimmer/vuex-persist/issues/88#issuecomment-448287077, or mute the thread https://github.com/notifications/unsubscribe-auth/ABQ_ymCjOtlABQjbK_DFaQlP1RZa2rHyks5u6RtPgaJpZM4ZURqJ .

[kpturner]

Isn't the OP using it is a client-only plugin then? The README says to use ssr: false and he is - but still gets the window is not defined error.

[kpturner]

OK I see what he did wrong. I have it at least storing state in localStorage now. I have another issue that I will log separately.

[kyriediculous]

Note that no-ssr still "renders" the content internally (but doesn't render the html, not until the parent is mounted).

[nasermirzaei89]

I used this code:

function getPlugins() {
    let plugins = []

    if (process.browser) {
        const vuexLocal = new VuexPersistence<RootState>({
            storage: window.localStorage
        })

        plugins.push(vuexLocal.plugin)
    }
}

export const plugins = getPlugins()

So, I get rid of error window is not defined

[topzdev]

@nasermirzaei89 you forgot to return the plugins

[nasermirzaei89]

@topzdev as I see in nuxt.js guide, we should only export it as plugins:

https://nuxtjs.org/guide/vuex-store/#plugins