1
votes

Vuex-persistedstate ne fonctionne pas après l'actualisation d'une page

Je crée une application spa avec laravel et vue, et je souhaite conserver mes informations de connexion dans l'état de vuex après avoir actualisé une page.

J'ai tapé

const state = {
    user: null,
    salonId: null
}

const getters = {
    check: state => !! state.user,
    checkSalonId: state => {return state.salonId},
}

const mutations = {
    setUser (state, user) {
        state.user = user
    },
    setSalonId (state, salonId) {
        state.salonId = salonId
    }
}

const actions = {
    async currentUser (context) {
        const response = await axios.get('/api/user')
        const user = response.data || null
        context.commit('setUser', user)
    },
    async logout (context) {
        context.commit('setUser', null)
        context.commit('setSalonId', null)
    },
    async currentSalon (context, salonId) {
        context.commit('setSalonId', salonId)
    }
}

export default {
    namespaced: true,
    state,
    getters,
    mutations,
    actions,
}

et installé Vuex-persistedstate et définissez les plugins comme ci-dessous.

import Vue from 'vue' import Vuex from 'vuex'

import auth from './auth'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        auth,
        plugins: [createPersistedState()],
    }
})

export default store

Je m'attendais à ce que mes données soient conservées après l'actualisation d'une page, mais ce n'était pas le cas.

J'ai vérifié ce qui se passe, et il semble que l'objet plugin était vide.

il semble que je ne puisse pas importer les plugins pour une raison quelconque, mais je ne sais pas pourquoi. Quelqu'un pourrait-il m'aider, s'il vous plaît?

mon fichier de module

sudo npm install vuex-persistedstate

vue.js

3 commentaires

Voilà ce que je veux dire. Vous remettez en question, mais ne vous souciez pas des réponses.

Oh désolé, je n'ai tout simplement pas remarqué votre réponse. Je n'ai pas été averti pour une raison quelconque. Je réponds toujours aux réponses. Merci pour votre réponse. Je me posais des questions à ce sujet pour toujours.

haha, ok je le vois maintenant. Merci pour votre attention 👌

3 Réponses :

1
votes

Je pense que vous devez configurer un objet option avec les modules que vous souhaitez conserver. Dans cet exemple, je persiste le module utilisateur de ma boutique (je n'ai pas inclus le code d'importation)

const persistedStateOptions = {
  paths: [
    'user',
  ]
}

export default new Vuex.Store({
  modules: {
    user,
  },
  plugins: [createPersistedState(persistedStateOptions)]
})

1 commentaires

Je l'ai essayé, mais cela n'a pas fonctionné. il semble que le problème ne vient pas des chemins ..

2
votes

Vous avez placé les plugins au mauvais endroit. Les plugins doivent être intégrés aux modules , et non à l'intérieur des modules .

Veuillez examiner ces différences.

const store = new Vuex.Store({
    modules: {
        auth
    },
    plugins: [createPersistedState()]
})

const store = new Vuex.Store({
    modules: {
        auth,
        plugins: [createPersistedState()]
    }
})

0 commentaires

0
votes

Regardez la différence dans les chemins. Cela a fonctionné pour moi.

import createPersistedState from 'vuex-persistedstate';
    Vue.use(Vuex);

   export default    new Vuex.Store({
   strict:true,
    modules:{
    party,
    contract
   },
   plugins: [createPersistedState(
    {
        paths:['party.selectedParty']
    }
  )],
   });

Où party est le nom du module et selectedParty est le nom de l'état du module. Maintenant, ce plugin ne s'occupe que de l'état selectedParty. Les composants vue qui obtiennent des données via l'état de la base de données doivent être exclus de ce plugin.

0 commentaires