Ever since incorporating the vuex persist plugin, I've been encountering an issue where the store doesn't seem to be accessible in the router.
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
});
In the router:
router.beforeEach((to, from, next) => {
console.log(userStorage.state._user);
next();
}
Interestingly, everything seems to work fine when that specific line is commented out:
https://i.sstatic.net/ZtXfk.png
However, once it's included:
https://i.sstatic.net/PGh8L.png
Additionally, here's a glimpse at how my current store setup appears:
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;
}
}