Pinia 存储在 Vue3 组件中不具有反应性

Question

我正在使用 Typescript 在我的 Vue3 应用程序中使用 Pinia 进行商店。我想管理当前显示的一周。当我尝试从商店访问

weekDisplay

变量时，问题就出现了。当

currentDate

被修改时，它不会更新它的值，即使它被包裹在

computed()

内。当按下某些按钮时，从

changeDisplay()

组件调用

PageHeader

函数。

请注意，

currentDate

在商店和组件内都已正确更新。

这是

src/stores/Activities.ts

:

import { defineStore } from "pinia";
import { computed, ref } from "vue";
import { weekName } from "@/main";
... /* Types, enums etc. */
export const useActivitiesStore = defineStore("activities", () => {
  const eventsMap = ref<Map<string, Activity[]>>(new Map());
  const currentDate = ref<Date>(new Date());
  const weekDisplay = computed(() => weekName(currentDate.value));
  function changeDisplay(change: number): void {
    currentDate.value.setDate(currentDate.value.getDate() + 7 * change);
  }
  return { eventsMap, currentDate, weekDisplay, changeDisplay };
});

这是

src/components/PageHeader.vue

:

<script setup lang="ts">
... /* Other imports */
import { useActivitiesStore } from "@/stores/Activities";
import { storeToRefs } from "pinia";
import { computed } from "vue";

let store = useActivitiesStore();

const { eventsMap, currentDate, weekDisplay } = storeToRefs(store);
</script>

<template>
  <header id="header">
    ...
    <section id="week-navigation-container" class="week-navigation">
      <article
        id="previous-week-button"
        class="week-button"
        @click="store.changeDisplay(-1)">
        <IconLeftArrow class="left-arrow" />
        <Tooltip text="Previous week" />
      </article>
      <article id="open-calendar-button" class="week-display">
        <h1 class="font-menu-title">
          {{ weekDisplay }}
        </h1>
        <Tooltip text="Open calendar" />
      </article>
      <article
        id="next-week-button"
        class="week-button"
        @click="store.changeDisplay(1)">
        <IconRightArrow class="right-arrow" />
        <Tooltip text="Next week" />
      </article>
    </section>
  </header>
</template>

这是

src/main.ts

:

import "./assets/main.css";

import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";

const pinia = createPinia();
const app = createApp(App);

app.use(router);
app.use(pinia);
app.mount("#app");

export function datesArr(date: Date) {
  ...
}

export function weekName(date: Date): string {
  ...
}

export function dayToTop(day: number) {
  ...
}

export function timeToLeft(hour: number, minute: number, second: number) {
  ...
}

export function timeToWidth(hour: number, minute: number) {
  ...
}

当按下按钮以显示相关信息时，具有

h1

类的

.font-menu-title

元素内的文本应更新。 （确切的值将是

weekName(currentDate)

的结果，它应始终存储在

weekDisplay

变量中）。

Answer 1

使用

setDate

更新日期是 Vue 反应性无法检测到的就地替换。这不是理想的代码，但您可以更改该行以包含分配并保证触发反应性响应：

function changeDisplay(change: number): void {
  currentDate.value = new Date(
    currentDate.value.setDate(currentDate.value.getDate() + 7 * change)
  )
}