Svelte中区分Store与普通变量的最佳命名规范方案问询

核心痛点 #

当前命名规范下，必须解构useCanvasContext的返回值才能传递参数，存在命名冲突问题，希望能直接传递整个canvasContext对象简化代码。

以下是几种可行的命名与代码组织方案：

方案1：给Store实例统一加store后缀 #

给每个writable/readable实例添加store后缀，明确区分「Store实例」和「状态值」，逻辑函数直接接收整个context对象。

修改后的 store.ts #

export type CanvasContext = ReturnType<typeof createCanvasStore>

export const createCanvasStore = () => {
  const canvasStateStore = writable<CanvasState>('idle')
  // 其他Store实例也统一加store后缀，比如shapeStore、toolStore等

  return {
    canvasStateStore,
    // 其他带store后缀的实例...
  }
}

const canvasContextSymbol = Symbol('canvasContext')

export const useCanvasContext = () => useContext(canvasContextSymbol, createCanvasStore)

修改后的 logic.ts #

import { get } from 'svelte/store'

export const changeCanvasState = (context: CanvasContext) => {
  const currentState = get(context.canvasStateStore)
  context.canvasStateStore.set(currentState === 'idle' ? 'pressed' : 'idle')
}

修改后的 App.svelte #

<script lang='ts'>
  import { useCanvasContext } from './store'
  import { changeCanvasState } from './logic'

  const canvasContext = useCanvasContext()

  const handleClick = () => {
    changeCanvasState(canvasContext) // 直接传递整个context，无需解构
  }
</script>

<div>
  {$canvasContext.canvasStateStore}
</div>
<button on:click={handleClick}>
  change canvas state
</button>

方案2：将状态操作封装到Store内部 #

把状态修改逻辑直接封装在Store的创建函数里，对外暴露操作方法，彻底避免参数传递的麻烦。

修改后的 store.ts #

export type CanvasContext = ReturnType<typeof createCanvasStore>

export const createCanvasStore = () => {
  const canvasState = writable<CanvasState>('idle')

  // 封装状态切换方法
  const toggleCanvasState = () => {
    canvasState.update(current => current === 'idle' ? 'pressed' : 'idle')
  }

  // 其他状态与方法...

  return {
    canvasState,
    toggleCanvasState,
    // 其他状态与方法...
  }
}

const canvasContextSymbol = Symbol('canvasContext')

export const useCanvasContext = () => useContext(canvasContextSymbol, createCanvasStore)

修改后的 App.svelte #

<script lang='ts'>
  import { useCanvasContext } from './store'

  const canvasContext = useCanvasContext()

  const handleClick = () => {
    canvasContext.toggleCanvasState() // 直接调用内置方法，无需传参
  }
</script>

<div>
  {$canvasContext.canvasState}
</div>
<button on:click={handleClick}>
  change canvas state
</button>

方案3：用state对象统一包裹状态值 #

如果不想给每个Store加后缀，可以把状态的访问入口统一放在state对象中，Store实例保持原名，逻辑函数直接接收context。

修改后的 store.ts #

export type CanvasContext = ReturnType<typeof createCanvasStore>

export const createCanvasStore = () => {
  const canvasState = writable<CanvasState>('idle')
  // 其他writable实例...

  // 统一暴露状态访问入口
  const state = {
    get canvasState() { return $canvasState }
  }

  return {
    state,
    canvasState,
    // 其他Store实例...
  }
}

const canvasContextSymbol = Symbol('canvasContext')

export const useCanvasContext = () => useContext(canvasContextSymbol, createCanvasStore)

修改后的 logic.ts #

import { get } from 'svelte/store'

export const changeCanvasState = (context: CanvasContext) => {
  const currentState = get(context.canvasState)
  context.canvasState.set(currentState === 'idle' ? 'pressed' : 'idle')
}

修改后的 App.svelte #

<script lang='ts'>
  import { useCanvasContext } from './store'
  import { changeCanvasState } from './logic'

  const canvasContext = useCanvasContext()

  const handleClick = () => {
    changeCanvasState(canvasContext)
  }
</script>

<div>
  {$canvasContext.canvasState}
</div>
<button on:click={handleClick}>
  change canvas state
</button>

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