能否使用SWR仅变更本地状态？业务场景与实现方式问询

完全可以用SWR实现你的需求，它的mutate API刚好适配你提到的两种操作场景，完全能当作轻量状态管理工具用。

1. 仅修改本地内存状态 #

调用mutate时，将第三个参数shouldRevalidate设为false，就只会更新SWR的本地缓存，不会触发任何远程API请求，所有共享该缓存的组件都会实时同步状态。

示例代码：

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then(res => res.json());

function ResourceEditor() {
  const { data, mutate } = useSWR('/api/resource', fetcher);

  // 仅本地修改资源，不触发远程请求
  const updateLocalState = (changes) => {
    mutate(prev => ({ ...prev, ...changes }), false);
  };

  return (
    <div>
      <input 
        value={data?.name || ''}
        onChange={(e) => updateLocalState({ name: e.target.value })}
        placeholder="修改名称（仅本地）"
      />
    </div>
  );
}

2. 应用变更并远程持久化 #

点击“保存”按钮时，先调用远程API提交修改，再通过mutate更新本地缓存；也可以让mutate直接处理异步请求流程，确保远程更新成功后再同步本地状态。

示例代码：

// 方式1：手动处理请求+更新缓存
const saveToRemote = async () => {
  // 提交本地修改到远程API
  const response = await fetch('/api/resource', {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  });
  const updatedData = await response.json();
  
  // 更新本地缓存，同时触发重新验证（可选）
  mutate(updatedData, true);
};

// 方式2：让SWR自动处理异步流程
const saveToRemote = () => {
  mutate(async () => {
    const response = await fetch('/api/resource', {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    });
    return response.json();
  });
};

适配你的业务场景流程 #

1. 初始化：用useSWR从API拉取初始资源，所有关联组件共享这一份缓存数据
2. 本地操作：用户在任意组件中修改时，调用带shouldRevalidate: false的mutate，仅更新内存缓存，所有组件实时同步
3. 持久化：点击“保存”按钮时，调用带远程请求的mutate，将内存中的修改同步到远程服务器，确保本地与远程数据一致

SWR的缓存机制天然支持跨组件状态共享，无需额外引入复杂的状态管理库，刚好匹配你的需求。

内容的提问来源于stack exchange，提问作者Martin