Vue3：重新渲染组件 - 组合 API

Question

我有一个导航栏组件和一个视图组件。当用户登录时，我希望两个组件都重新渲染。目前只有视图组件重新渲染，导航栏没有。

尝试强制重新渲染：钥匙传递一个“用户”对象，传递一个更新更改的“navKey”计数器。无论如何，我总是得到“[Vue 警告]：无效的监视源：true 监视源只能是 getter/effect 函数、ref、反应对象或这些类型的数组。"

阅读了数十篇指南和文档，并为此花费了数天时间，但我就是不明白我所缺少的。第一个应用程序，感谢您的帮助。

应用程序.vue

    <template>
      <div v-if="appReady" class="min-h-full font-Poppins box-border">
        <Navigation :key="state" />
        <router-view />
      </div>
    </template>
    
    <script>
    import Navigation from "./components/Navigation.vue";
    import { ref, reactive } from "vue";
    import store from "./store/store.js";
    import { useRouter } from "vue-router";
    
    export default {
      components: {
        Navigation,
      },
    
      setup() {
        // Data & variables
        const appReady = ref(null);
        const router = useRouter()
    
        const user = JSON.parse(localStorage.getItem("BJJFocusUser"))
        const state = store.methods.setUser(user)
    
        if (!user) {
          appReady.value = true;
          console.log("No user logged in");
          router.push({ name: "Login" });
        } else {
          store.methods.setUser(user);
          appReady.value = true;
          console.log("User logged in");
          router.push({ name: "ProgressView" });
        }
    
        return { appReady, user, state };
      },
    };
    </script>

导航.vue

    <template>
      <header class="bg-at-light-orange text-white">
        <nav
          class="container py-5 px-4 flex flex-column gap-4 items-center sm:flex-row"
        >
          <div class="flex items-center gap-x-4">
            <img
              class="w-32"
              src="../assets/vector/default-monochrome-white.svg"
              alt="bjj focus logo"
            />
          </div>
          <Slide
          </Slide>
        </nav>
      </header>
    </template>
    
    <script>
    import { logoutUser } from "../services/userService";
    import { useRouter } from "vue-router";
    import { Slide } from "vue3-burger-menu"
    import store from "../store/store"
    
    export default {
        components: {
            Slide
        },
    
        setup() {
          const router = useRouter();
          const user = store.state.user
    
          // Logout function
          const logout = async () => {
            logoutUser();
            store.methods.setUser()
            router.push({ name: "Login" });
          };    
          return { logout, Slide, store, user };
        },
    
    };
    </script>

Store.js

    import { reactive } from "vue";
    
    const state = reactive({
      user: null,
    });
    
    const methods = {
      setUser(payload) {
        state.user = payload ? payload : null;
      },
      getUser() {
        return JSON.stringify(state.user)
      }
    };
    
    export default {
      state,
      methods,
    };

Answer 1

我设法使导航栏重新渲染的方式是：

1. 将 EventBus（发射器）添加到登录视图

       // Emitter (EventBus) this section emits an event that can be listened to globally
       const emitter = inject('emitter')
       const emitLogin = _ => {
          emitter.emit('userHasLoggedIn', true)
       }
   

   2. 向注销添加另一个 EventBus（发射器）（在我的情况下，它位于导航栏中）

       // Emitter (EventBus) this section emits an event that can be listened to globally
       const emitter = inject('emitter')
       const emitLogout = _ => {
           emitter.emit('userHasLoggedOut', true)
       }
   

   3. 为 App.vue（根 Vue 组件）添加一个监听器和一个 :key，它读取一个变量，当监听器接收到发射器的信号时，该变量会更新

   
       <template>
         <div v-if="appReady" class="min-h-full font-Poppins box-border bg-at-light-orange">
           <Navigation :key="navRerenderKey" />   // **NOTE THE :key HERE**
           <router-view />
         </div>
       </template>
   
       <script>
       export default {
           setup() {
               // Initialize this variable before the functions
               const navRerenderKey = ref(0)
   
               // Listener (EventBus) this section listens to the emitters
               const emitter = inject('emitter')
               emitter.on('userHasLoggedIn', (value) => {
                   navRerenderKey.value += 1
                   console.log("(emitter) Logged In")
               })
               emitter.on('userHasLoggedOut', (value) => {
                   navRerenderKey.value += 1
                   console.log("(emitter) Logged Out")
               })
           }
       }
       </script>