Геттер Pinia не обновляется

Question

У меня есть следующий код

      <script lang="ts">
import { RouterView } from "vue-router";
import defaultLayout from "@/layouts/default.vue";
import dashboardLayout from "@/layouts/dashboard.vue";
import { useDefaultStore } from "@/stores/default";
import "./index.css";
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    let { getLayout } = useDefaultStore();

    return { getLayout };
  },
  components: { defaultLayout, dashboardLayout },
});
</script>

<template>
  {{ getLayout }}
  <component :is="getLayout">
    <RouterView />
  </component>
</template>

когда я добрался до /dashboardмое состояние обновляется, но геттер по какой-то причине не обновляется, почему?

      <script setup lang="ts">
import { useDefaultStore } from "@/stores/default";
let { getUserData, SET_LAYOUT, getLayout } = useDefaultStore();
SET_LAYOUT("dashboardLayout");
</script>

Вот мой магазин:

      actions: {
    SET_LAYOUT(layout: any) {
      console.log("setting layout");
      console.log(layout);
      this.layout = layout;
    },
}

Я буквально вижу изменения внутри консоли, но они не применяются к пользовательскому интерфейсу.

Answer 1

Я обнаружил это.

Вы не можете деструктурировать свой магазин, он теряет свою реактивность

      let { getLayout } = useDefaultStore();

Поэтому я изменил его на

      let store = useDefaultStore();

и используется store.getLayoutи это работает!

Answer 2

Это описано в документации, это относится кstoreToRefsпомощник:

      const { getLayout } = storeToRefs(useDefaultStore());