Svelte自定义writable store如何正确获取内部最新状态值

问题场景 #

为FiveM服务器开发脚本时，使用Svelte框架编写自定义store存储车辆属性（姓名、姓氏、车牌号等），需要在自定义方法内读取store中存储的最新车牌号，初始代码无法直接拿到store内部值：

const BlaBla = (Data) => {
  const { subscribe, set, update } = writable(Data);
  return {
    subscribe,
    update,
    set,
    setData: (NewData) => {
      set(NewData)
    },
    getData: () => {
      return // 此处无法直接获取存储的最新值
    }
  }
}

最初尝试在store作用域声明缓存变量，更新状态时同步赋值给缓存变量，通过getData返回缓存的车牌号：

const VehicleStore = (Vehicle) => {
  let Data = {} // 作用域内缓存变量
  const { subscribe, set, update } = writable(Vehicle);
  return {
    subscribe,
    update,
    set,
    setData: (NewData) => {
      update((s) => {
        s = NewData
        Data = s
        return s
      })
    },
    getData: () => {
      return Data.Plate
    }
  }
}

该方案存在逻辑漏洞：外部直接调用暴露的set/update方法修改值时，内部缓存Data不会同步更新，会出现取值不一致问题。

标准实现方案 #

Svelte自定义store内部取值有两种官方推荐的实现方式，可根据场景选择：

• 方式1：使用内置get工具方法（适合低频取值场景）
  get是svelte/store模块导出的官方工具方法，可同步读取任意store的当前值，无需额外维护缓存，代码量最少：

  import { writable, get } from 'svelte/store';
  
  const createVehicleStore = (initialVehicle) => {
    const { subscribe, set, update } = writable(initialVehicle);
    
    const store = {
      subscribe,
      set,
      update,
      setData: (newData) => {
        set(newData)
      },
      getPlate: () => {
        return get(store).Plate
      }
    }
  
    return store;
  }
  

  注意：get方法内部会创建临时订阅，取值后立即销毁，高频调用会产生额外性能开销，禁止在循环、逐帧动画等高频场景使用。

• 方式2：内部维护唯一状态源（适合高频取值场景）
  重写store的set/update方法，所有更新操作同步修改内部状态变量，从根源避免缓存不一致问题，是自定义store的通用高性能写法：

  import { writable } from 'svelte/store';
  
  const createVehicleStore = (initialVehicle) => {
    // 内部维护唯一状态源，所有读写都基于该变量
    let state = initialVehicle;
    const { subscribe, set: nativeSet } = writable(state);
  
    const set = (newValue) => {
      state = newValue;
      nativeSet(newValue);
    };
  
    const update = (updater) => {
      state = updater(state);
      nativeSet(state);
    };
  
    return {
      subscribe,
      set,
      update,
      setData: (newData) => {
        set(newData);
      },
      getPlate: () => {
        // 直接读取内部变量，无额外性能开销
        return state.Plate
      }
    }
  }
  

  该方案下所有修改store值的路径（外部调用set/update、内部调用setData）都会同步更新内部state变量，不存在值不一致问题，取值为纯变量访问，无性能损耗。

选型建议 #

• 仅在少量自定义方法中偶尔读取store值时，直接使用get方法即可，开发效率最高
• 需要频繁读取内部值、自定义方法较多时，选择内部维护状态源的方案，稳定性和性能更优

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