使用来自vuex状态的v-if的Vue3组件

// store.js
import { createStore } from 'vuex';

export default createStore({
  state() {
    return {
      isLoggedIn: false
    };
  },
  mutations: {
    setLoggedIn(state, value) {
      state.isLoggedIn = value;
    }
  }
});

<template>
  <div>
    <h1>Welcome to the Dashboard</h1>
    <button @click="toggleLogin">Toggle Login</button>
    <div v-if="isLoggedIn">
      <p>You are logged in.</p>
      <!-- 其他已登录时显示的内容 -->
    </div>
    <div v-else>
      <p>Please log in to view more content.</p>
      <!-- 其他未登录时显示的内容 -->
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['isLoggedIn'])
  },
  methods: {
    ...mapMutations(['setLoggedIn']),
    toggleLogin() {
      this.setLoggedIn(!this.isLoggedIn);
    }
  }
};
</script>

computed: {
  isLoggedIn() {
    return this.$store.state.isLoggedIn;
  }
}

import { mapState } from 'vuex';

computed: {
  ...mapState(['isLoggedIn'])
}