基于Vue与Pinia实现可复用表格组件的状态隔离方案问询

你的问题根源在于当前Pinia的table store是单例模式，所有Table组件实例共享同一状态，导致不同Table实例的搜索值互相同步。以下是两种无需新建Pinia模块的状态隔离方案：

方案一：组件内部维护状态（无需Pinia，推荐） #

将搜索状态提升到Table父组件，通过props和事件传递给子组件，每个Table实例独立管理自身状态，天然实现隔离。

修改后的代码： #

Search.vue

移除Pinia依赖，通过事件向父组件传递搜索值：

<script setup lang="ts">
import { ref } from "vue";

const search = ref<string>('');
const emit = defineEmits<{
  'update:search': [value: string]
}>();
</script>

<template>
  <input 
    type="text" 
    class="form-control" 
    v-model="search"
    @input="emit('update:search', search)"
  >
</template>

Records.vue

通过props接收父组件传递的搜索值：

<script setup lang="ts">
defineProps<{
  search: string
}>();
</script>

<template>
  {{ search }}
</template>

Table.vue

维护自身的search状态，传递给子组件：

<script setup lang="ts">
import { ref } from "vue";
import Records from "@/components/table/Records.vue";
import Search from "@/components/table/Search.vue";

const search = ref<string>('');
</script>

<template>
  <Search @update:search="search = $event" />
  <Records :search="search" />
</template>

这种方式符合Vue组件数据流规范，状态完全隔离，且实现简单轻量，适合组件级状态管理场景。

方案二：Pinia Store工厂模式（保留Pinia） #

如果需要保留Pinia的状态管理能力（比如后续要在组件外部访问状态），可以通过工厂函数创建独立的store实例，每个Table组件生成专属的store，实现状态隔离。

修改后的代码： #

table.ts（改为工厂函数）

import { ref } from "vue";
import { defineStore } from "pinia";

// 定义store模板，作为工厂函数的返回内容
const createTableStore = () => {
  const search = ref<string>('');

  function setSearch(s: string) {
    search.value = s;
  }

  return {
    search,
    setSearch
  };
};

// 导出工厂函数，每次调用生成新的store实例
export const useTableStore = defineStore('table', createTableStore);

Table.vue（创建独立store并传递给子组件）

<script setup lang="ts">
import { useTableStore } from "@/stores/table";
import Records from "@/components/table/Records.vue";
import Search from "@/components/table/Search.vue";

// 为当前Table实例创建专属store
const tableStore = useTableStore();
</script>

<template>
  <Search :store="tableStore" />
  <Records :store="tableStore" />
</template>

Search.vue（接收父组件传递的store）

<script setup lang="ts">
import { ref, watch } from "vue";

const props = defineProps<{
  store: ReturnType<typeof useTableStore>
}>();

const search = ref<string>('');

watch(search, () => {
  props.store.setSearch(search.value);
});
</script>

<template>
  <input type="text" class="form-control" v-model="search">
</template>

Records.vue（接收父组件传递的store）

<script setup lang="ts">
defineProps<{
  store: ReturnType<typeof useTableStore>
}>();
</script>

<template>
  {{ store.search }}
</template>

这种方式无需新建多个Pinia模块，基于同一模板生成独立的store实例，既保留了Pinia的状态管理能力，又实现了多Table实例的状态隔离。

方案对比 #

• 方案一：更轻量，符合组件化思想，优先推荐用于仅在组件内部使用的状态。
• 方案二：适合需要在组件外部（如其他页面、工具函数）访问状态的场景。

内容的提问来源于stack exchange，提问作者Oğuz Öztınaz