我无法在 v-if 中读取 vuex-persist

Question

我正在尝试在 nuxt.js 上使用 vuex-persist，但是当尝试读取 v-if 中的数据时不起作用。

我在名为 vuex-persis.js 的插件中创建了一个新文件，代码如下：

import VuexPersistence from 'vuex-persist'

export default ({ store }) => {
  new VuexPersistence({
      storage: window.localStorage,
  }).plugin(store);
}

并进入 nuxt.config.js 我添加了以下代码：

plugins: [{ src: '~/plugins/vuex-persist', mode: 'client' }],

我用来存储和获取数据的代码如下：

this.$store.commit('login', { idToken });

store.state.isLogin

并且我在项目中添加了以下文件./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 = '';
  },
};

当我尝试从商店获取数据时，我有以下导航栏：

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") }}

但总是在同一个地方输入，登录。

我尝试使用这样的计算器，但在 v-if

上不起作用

computed: {
    isLogin: function () {
      console.log(this.$store.state.isLogin);
      return this.$store.state.isLogin;
    },
  },

console.log 打印存储在浏览器中的值，但节点中的 console.log 始终打印默认状态。

无论如何，console.log 总是打印存储在本地存储中的正确值。

知道如何在 v-if 中使用该数据吗？

谢谢

Answer 1

最后在v-if

中直接使用$store.state.isLogin解决了

我无法在 v-if 中读取 vuex-persist

I cannot read vuex-persist in v-if

javascript

vue.js

nuxt.js

vuejs3