Question

我正在使用laravel和vue制作spa应用程序，并且在刷新页面后希望将登录信息保持在vuex的状态。

我输入

sudo npm install vuex-persistedstate

并安装Vuex-persistedstate并按如下所示设置插件。

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

我希望刷新页面后可以保留我的数据，但事实并非如此。

我检查了怎么回事，看来插件对象是空的。

似乎我由于某种原因无法导入插件，但是我不知道为什么。有人可以帮我吗？

我的模块文件

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

Answer 1

我认为您需要使用要保留的模块设置一个选项对象。在此示例中，我将持久存储我商店中的用户模块（未包含导入代码）

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

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

Answer 2

您将plugins放在错误的位置。 plugins应该与modules内联，而不是modules内部。

请看看这些区别。

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

VS

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

Answer 3

看看路径上的差异。这对我有用。

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

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

其中party是模块名称，selectedParty是模块状态的名称。现在，此插件仅处理selectedParty状态。通过DB从状态获取数据的vue组件应保留在此插件之外。

刷新页面后Vuex-persistedstate不起作用

3 个答案: