为啥 Vuex-persist 不在 localStorage 中存储任何内容?

Posted

技术标签:

【中文标题】为啥 Vuex-persist 不在 localStorage 中存储任何内容?【英文标题】:Why Vuex-persist doesn't store anything in localStorage?为什么 Vuex-persist 不在 localStorage 中存储任何内容? 【发布时间】:2019-11-03 05:57:21 【问题描述】:

所以,在我的项目(Vue-cli + TypeScript)中,我需要将用户数据存储到 locaStorage。为此,我决定将 vuex-persist(npm 插件)与 vuex 一起使用。但是在 DevTool 中,在 localStorage 中什么也没有出现。我的代码有什么问题。提前谢谢你。

在之前的项目中,我已经使用了这种工具组合,并且它们运行良好。在这个项目中,我使用相同的配置,但它不起作用。这是最奇怪的事情。

这是 StructureModule.ts

import  ActionTree, MutationTree, GetterTree, Module  from "vuex";

const namespaced: boolean = true;

interface IDataStructure 
    name: string;
    type: string;
    description: string;


interface IStructureState 
    name: string;
    description: string;
    props: IDataStructure[];



export interface IState 
    structures: IStructureState[];


export const state: IState = 
    structures: [
        
            name: "",
            description: "",
            props: [
                
                    name: "",
                    type: "",
                    description: "",
                ,
            ],
        ,
    ],
;

export const actions: ActionTree<IState, any> = 
    addNewDataStructure( commit , payload: IStructureState): void 
        commit("ADD_DATA_STRUCTURE", payload);
    ,
    updateDataStructure( commit , payload: IStructureState): void 
        commit("UPDATE_EXISTING_DATA_STRUCTURE", payload);
    ,
    clearDataStructure( commit ,  name : IStructureState): void 
        commit(" CLEAR_DATA_STRUCTURE", name);
    ,
;

export const mutations: MutationTree<IState> = 
    ADD_DATA_STRUCTURE(state: IState, payload: IStructureState) 
        if (state.structures[0].name === "") 
            state.structures.splice(0, 1);
        
        state.structures.push(payload);
    ,

    CLEAR_DATA_STRUCTURE(state: IState, name: string) 
        state.structures.filter((structure: IStructureState) => 
            if (structure.name === name) 
                state.structures.splice( state.structures.indexOf(structure), 1);
            
        );
    ,

    UPDATE_EXISTING_DATA_STRUCTURE(state: IState, payload: IStructureState) 
        state.structures.map((structure: IStructureState) => 
            if (structure.name === payload.name) 
                state.structures[state.structures.indexOf(structure)] = payload;
            
        );
    ,
;

export const getters: GetterTree<IState, any> = 
    dataStructureByName(state: IState, structName: string): IStructureState[] 
        const structure: IStructureState[] = state.structures.filter((struct: IStructureState) => 
            if (struct.name === structName) 
                return struct;
            
        );
        return structure;
    ,

    dataStructures(): IStructureState[] 
        return state.structures;
    ,
;

export const StructureModule: Module<IState, any> = 
    namespaced,
    state,
    mutations,
    actions,
    getters,
;

这是 index.ts

import Vue from "vue";
import Vuex,  ModuleTree  from "vuex";
import VuexPersistence from "vuex-persist";

import  StructureModule , IState from "./modules/StructureModule";

Vue.use(Vuex);

const storeModules: ModuleTree<IState> = 
    StructureModule,
;

const vuexPersistentSessionStorage = new VuexPersistence(
    key: "test",
    modules: ["StructureModule"],
);


export default new Vuex.Store<any>(
    modules: storeModules,
    plugins: [vuexPersistentSessionStorage.plugin],
);

这是 main.ts


import store from "@/store/index.ts";
import * as $ from "jquery";
import Vue from "vue";

import App from "./App.vue";
import router from "./router";

global.EventBus = new Vue();
(global as any).$ = $;
Vue.config.productionTip = false;
console.log(store);
new Vue(
  router,
  store,
  render: (h) => h(App),
).$mount("#app");

这是 vue.config.js

module.exports = 
    transpileDependencies: ["vuex-persist"],
;

This is store in vue-devtool And this is dev-tool localStorage

我希望在 localstorage 中出现一个带有预定义值的键“test”的存储,但不是这个 localStorage 是空的。

【问题讨论】:

【参考方案1】:

如指南所述

在 Vuex 存储中真正改变状态的唯一方法是提交 突变

https://vuex.vuejs.org/guide/mutations.html

我没有在您的代码中看到任何突变。

要不然你看看https://github.com/robinvdvleuten/vuex-persistedstate,好像比较流行,我一直用没问题。

使用非常简单:你只需要在你的商店中声明一个插件:

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store(
  // ...
  plugins: [createPersistedState()],
)

【讨论】:

不幸的是,您提供的解决方案也不起作用,无论如何谢谢。似乎问题更多地与某些配置有关。另外,我忘了说代码是在 localhost:8080 上使用 vue-cli-service serve 运行的。 问题可能是您的商店是空的。我没有在您的代码中看到任何突变。 你在调用这些突变吗? 是的,在“动作”中被调用。而具体的动作是通过@Action("updateDataStructure", namespace: "StructureModule" ) public updateDataStructure!: (structure: IStructureModel) =&gt; ; 调用的 你在使用 Vue DevTools 吗? “Vuex”标签中有什么东西吗?【参考方案2】:

我找到了解决这个问题的方法。 就我而言,我只是从

中删除命名空间
export const StructureModule: Module<IState, any> = 
    namespaced, <----- This
    state,
    mutations,
    actions,
    getters,
;

似乎只有当你有多个模块时才应该使用命名空间。

【讨论】:

以上是关于为啥 Vuex-persist 不在 localStorage 中存储任何内容?的主要内容,如果未能解决你的问题,请参考以下文章

vuex-persist数据持久化存储

vuex-persist数据持久化存储

vuex-persist数据持久化存储

vuex-persist数据持久化存储

检查vuex-persist是否已还原Nuxt项目中的数据

为啥或为啥不在 C++ 中使用 memset? [关闭]