VueJS 3.4 实现双数据源取值、单数据源赋值的计算属性问题

嘿，你的这个实现思路真的挺巧妙的——用Pinia单独存修改过的区块，最后只提交这些变更，既减少了API请求的数据量，也避免了不必要的全量更新。我来帮你捋捋当前代码的逻辑，再给你几个实用的优化建议：

首先，先拆解下你写的这个计算属性的核心逻辑：

• getter部分：优先从Pinia的store.blocks里取当前激活的区块数据，如果Pinia里还没存过这个区块的修改，就用Vue Query从API拉取的原始数据。这个逻辑完全没问题，能保证用户看到的要么是自己修改后的内容，要么是最新的服务器数据。
• setter部分：通过Pinia的$patch方法把修改后的区块存到store里，这样后续再调用getter时，就会优先取到修改后的版本，同时也把需要提交的变更收集了起来，这个设计很合理。

接下来给你几个可以优化的点，让整个流程更健壮：

1. 完善空值与边界处理 #

当前代码里用activeBlock.value ?? 0来处理激活区块为空的情况，但如果你的区块ID本身就可能是0的话，就会出现误匹配的问题。可以改成这样，避免取错数据：

get() {
  const blockId = activeBlock.value;
  if (blockId == null) return null; // 或者返回一个默认空区块，根据业务需求调整
  return store.blocks[blockId] ?? blocks.value[blockId];
}

2. 新增修改记录追踪 #

为了更高效地批量提交修改后的区块，建议在Pinia store里新增一个数组来记录被修改过的区块ID，这样提交时不用遍历全量数据，直接根据ID提取即可：

// 在Pinia store的state里新增
modifiedBlockIds: [] as number[],

// 在计算属性的setter里更新这个数组
set(value: Block) {
  const blockId = activeBlock.value;
  if (blockId == null) return;
  store.$patch((state) => {
    state.blocks[blockId] = value;
    // 去重添加修改ID
    if (!state.modifiedBlockIds.includes(blockId)) {
      state.modifiedBlockIds.push(blockId);
    }
  });
}

3. 提交后同步缓存与状态 #

当你把修改后的区块通过patch请求提交到服务器后，记得要做两件事：

• 清空Pinia里的修改记录（避免重复提交）
• 更新Vue Query的缓存，确保下次拉取数据时能拿到最新的服务器数据

可以在Pinia里写一个专门的提交方法：

// Pinia store的actions里新增
async submitModifiedBlocks() {
  if (this.modifiedBlockIds.length === 0) return;
  
  // 收集所有修改过的区块
  const modifiedBlocks = this.modifiedBlockIds.map(id => this.blocks[id]);
  
  // 发送patch请求（这里替换成你的实际API调用）
  await yourApiService.patchBlocks(modifiedBlocks);
  
  // 清空本地修改记录
  this.blocks = {};
  this.modifiedBlockIds = [];
  
  // 更新Vue Query缓存，让数据同步
  const queryClient = useQueryClient();
  queryClient.invalidateQueries({ queryKey: ['blocks'] });
}

完整代码示例 #

最后给你整合一下完整的组件和Pinia store代码，方便参考：

组件代码

<script setup lang="ts">
import { computed } from 'vue';
import { useBlocksStore } from '@/stores/blocks';
import { useBlocksAPI } from '@/api/blocks';
import { storeToRefs } from 'pinia';
import { useQueryClient } from '@tanstack/vue-query';

const store = useBlocksStore();
const { blocks } = useBlocksAPI();
const { activeBlock } = storeToRefs(store);
const queryClient = useQueryClient();

const block = computed(
  {
    get() {
      const blockId = activeBlock.value;
      if (blockId == null) return null;
      return store.blocks[blockId] ?? blocks.value[blockId];
    },
    set(value: Block) {
      const blockId = activeBlock.value;
      if (blockId == null) return;
      store.$patch((state) => {
        state.blocks[blockId] = value;
        if (!state.modifiedBlockIds.includes(blockId)) {
          state.modifiedBlockIds.push(blockId);
        }
      });
    },
  }
);

// 提交修改的方法
const handleSubmit = async () => {
  await store.submitModifiedBlocks();
};
</script>

<template>
  <div v-if="block">
    <input v-model="block.properties.left" type="text" />
    <button @click="handleSubmit">提交修改</button>
  </div>
  <div v-else>请选择一个区块</div>
</template>

Pinia Store代码

// @/stores/blocks.ts
import { defineStore } from 'pinia';
import { useQueryClient } from '@tanstack/vue-query';
import yourApiService from '@/api/blocks';

export interface Block {
  id: number;
  properties: {
    left: string;
    // 其他属性根据业务定义
  };
}

export const useBlocksStore = defineStore('blocks', {
  state: () => ({
    blocks: {} as Record<number, Block>,
    modifiedBlockIds: [] as number[],
    activeBlock: null as number | null,
  }),
  actions: {
    async submitModifiedBlocks() {
      if (this.modifiedBlockIds.length === 0) return;
      
      try {
        await yourApiService.patchBlocks(
          this.modifiedBlockIds.map(id => this.blocks[id])
        );
        
        // 清空本地状态
        this.blocks = {};
        this.modifiedBlockIds = [];
        
        // 刷新Vue Query缓存
        const queryClient = useQueryClient();
        queryClient.invalidateQueries({ queryKey: ['blocks'] });
        
        console.log('修改提交成功');
      } catch (error) {
        console.error('提交失败:', error);
        // 这里可以添加错误提示逻辑
      }
    },
  },
});

备注：内容来源于stack exchange，提问作者pashata