pinia 商店更新后，Vue 3 组件没有更新

Question

我正在使用 typescript 和 Pinia 开发一个 Vue js 3 项目。

我有一个创建变更日志的模式，它运行良好，变更日志已创建，但视图未更新，我需要刷新页面才能显示。

<template>
  <div class="flex px-4">
    <CreateChangelogModal/>
  </div>
  <main>
    <div class="grid grid-cols-1 gap-4 place-items-center mt-10 md:mt-28">
      <template v-if="changelogStore.filteredChangelogs?.length">
        <ChangelogCard
          class="mb-2.5"
          v-for="changelog in changelogStore.filteredChangelogs"
          :id="changelog.id"
          :date="changelog.date"
          :type="changelog.type"
          :title="changelog.title"
          :app_name="changelog.app_name"
          :content="changelog.content"
          :key="changelog.id"
        />
      </template>
      <div v-else class="text-center p-4">
        <p>No changelogs to display</p>
      </div>
    </div>
  </main>
</template>

<script setup lang="ts">
const changelogStore = useChangelogStore()

onMounted(async () => {
  if (changelogStore.changelogs.length === 0) {
    await changelogStore.fetchChangelogs()
  }
})
</script>

我的商店，changelogsStore.ts：

export const useChangelogStore = defineStore('changelogs', {
  state: () => ({
    changelogs: [] as ChangelogInterface[],
    searchQuery: ''
  }),

  getters: {
    filteredChangelogs: (state) => {
      const searchLower = state.searchQuery.toLowerCase()
      return state.changelogs.filter((changelog) => {
        return changelog.title.toLowerCase().includes(searchLower) ||
               changelog.date.includes(searchLower) ||
               changelog.type.toLowerCase().includes(searchLower)
      })
    }
  },

  actions: {
    setSearchQuery(newQuery: string) {
      this.searchQuery = newQuery
    },

    async fetchChangelogs(lastChangelogId?: number) {
      try {
        const newChangelogs = await changelogService.getAllChangelogs(lastChangelogId)
        if (newChangelogs.length > 0) {
          this.changelogs.push(...newChangelogs)
        }
        return newChangelogs
      } catch (error) {
        console.error('Failed to fetch changelogs:', error)
        return []
      }
    },

    async generateChangelog(changelogData: ChangelogInterface) {
      try {
        const newChangelog = await changelogService.createChangelog(changelogData)
        console.log('FROM THE STORE GENERATE CHANGELOG' ,changelogData)
        this.changelogs.push(newChangelog)
      } catch (error) {
        console.error('Failed to create changelog:', error)
      }
    },

以及创建变更日志的表单（不确定问题是否来自那里，但只是为了确定）：

<script lang="ts" setup>
const changelogUseCase = new ChangelogsUsecases()

const createChangelog = async (formData: ChangelogInterface) => {
  try {
    const newChangelog = await changelogUseCase.createChangelog(formData)
    if (newChangelog) {
      // NOT SO SURE ABOUT changelogStore.changelogs.push(newChangelog)
      // changelogStore.fetchChangelogs(newChangelog.id)

    }
  } catch (error) {
    console.error('Error while creating new changelog :', error)
  }
}

const onSubmit = handleSubmit(async (values) => {
  const validData: ChangelogInterface = {
    title: values.title,
    type: values.type,
    date: values.date,
    content: values.content,
    app_name: values.app_name
  }

  await createChangelog(validData)
})
</script>

我尝试仅显示可能存在问题的所需代码。

谢谢！

Answer 1

我发现了问题。 您需要将

filteredChangelogs

getter 作为 Vue 组件中的引用公开。

参见示例：

import { storeToRefs } from 'pinia'

const changelogStore = useChangelogStore()
const { filteredChangelogs } = storeToRefs(changelogStore)

现在

filteredChangelogs

具有反应性。你可以像这样使用它：

<ChangelogCard v-for="changelog in filteredChangelogs" />