Pinia getter 不更新

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 时，我的状态得到更新，但 getter 由于某种原因没有更新，这是为什么？

<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;
    },
}

我确实可以看到控制台内的更改，但它们没有应用到 UI

Answer 1

我找到了。

您不能破坏您的商店，它会失去反应性

let { getLayout } = useDefaultStore();

所以我改成了

let store = useDefaultStore();

并使用了 store.getLayout 并且有效！

Answer 2

这已包含在文档中，storeToRefs helper 就是这种情况：

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

Pinia getter 不更新

Pinia getter does not update

javascript

vue.js

vuejs3

pinia