Estoy tratando de usar vuex-persist en nuxt.js pero cuando trato de leer los datos en un v-si no funciona.
Creé un nuevo archivo dentro de los complementos llamado vuex-persis.js con el siguiente código:
import VuexPersistence from 'vuex-persist' export default ({ store }) => { new VuexPersistence({ storage: window.localStorage, }).plugin(store); } y en nuxt.config.js agregué el siguiente código:
plugins: [{ src: '~/plugins/vuex-persist', mode: 'client' }],El código que utilizo para almacenar y obtener datos es el siguiente:
this.$store.commit('login', { idToken }); store.state.isLogin y he agregado el siguiente archivo dentro del proyecto ./store/index.js
export const state = () => ({ isLogin: false, idToken: '', }); export const mutations = { login(state, newState) { state.isLogin = true; state.idToken = newState.idToken; }, logout(state) { state.isLogin = false; state.idToken = ''; }, };Tengo la siguiente barra de navegación cuando intento obtener los datos de la tienda:
navbar-button(to='/board', v-if='$store.state.isLogin') p {{ $t("navbar_board") }} navbar-button(v-if='$store.state.isLogin', @click.native='logout') p {{ $t("navbar_logout") }}pero siempre ingresa en el mismo lugar, inicia sesión.
Traté de usar un computado como este pero no funciona en el v-if
computed: { isLogin: function () { console.log(this.$store.state.isLogin); return this.$store.state.isLogin; }, },el archivo console.log imprime el valor almacenado en el navegador, pero el nodo console.log imprime siempre el estado predeterminado.
De todos modos, console.log siempre imprime el valor correcto almacenado en el almacenamiento local.
¿Alguna idea sobre cómo puedo usar esos datos en el v-if?
Gracias
Finalmente resuelto directamente usando $store.state.isLogin en el v-if