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 ***@***.*** 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 <#88 (comment)>, 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