添加 vuex persist 插件后，我无法在路由器中存储

Question

添加 vuex persist 插件后，我无法在路由器中存储。

const vuexPersist = new VuexPersist({
    key: "vuex",
    storage: localStorage
});

const store = new Vuex.Store({
    state: {},
    modules: {
        alertStorage,
        userStorage,
    },
    //plugins: [vuexPersist.plugin] <-- if I comment out this, its working
});

在路由器中：

router.beforeEach((to, from, next) => {
    console.log(userStorage.state._user);
    next();
}

注释掉行时的结果：

如果不是：

加上信息，这就是我的商店的样子：

import {Module, Mutation, VuexModule} from "vuex-module-decorators";
import {UserResponseDto} from "@/common/dto/user-response-dto";
import Utils from "@/common/utils";

@Module
export default class UserStorage extends VuexModule{
     _user: UserResponseDto = {} as UserResponseDto;

    @Mutation
    protected loginUser(user: UserResponseDto) {
        this._user = user;
    }

    @Mutation
    protected logoutUser() {
        this._user = {} as UserResponseDto;
    }

    get isLoggedIn() {
        return !Utils.isEmpty(this._user);
    }

    get user():UserResponseDto{
        return this._user;
    }
}

Answer 1

这是正常行为，因为您必须指示它使用当前浏览器window 的localStorage。

有两种方法可以实现：

const vuexPersist = new VuexPersist({
    key: "vuex",
    storage: window.localStorage // modified here
});

或者根本不精确存储：

const vuexPersist = new VuexPersist({
    key: "vuex"
});

在后一种情况下，默认存储为：window.localStorage。

在这两种情况下，您都必须将插件注入到 Vuex：

const store = new Vuex.Store({
    state: {},
    modules: {
        alertStorage,
        userStorage,
    },
    plugins: [vuexPersist.plugin] // Do not comment it out
});