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

Question

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

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

这是正常现象，因为您必须指示它使用当前浏览器localStorage的{​​{1}}。

有两种方法可以实现此目的：

window

或者根本不调整存储空间：

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

在这种情况下，默认存储为：const vuexPersist = new VuexPersist({ key: "vuex" }); 。

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

window.localStorage