翻译:Vue 3 中的动态 Pinia Store

原文地址:dynamic-pinia-stores


今天我学习了如何通过生成唯一的商店 ID 在 Vue 3 中创建动态 Pinia 商店。当您需要对同一组件的多个实例(例如数据表或表单)进行单独的状态管理时,这非常有用。

操作方法如下:

ts
function useStore(id: string) {
    return defineStore(`store-${id}`, () => {
        const data = ref({})

        return { data }
    })()
}

// Usage example:
const tableOneStore = useStore('table1')
const tableTwoStore = useStore('table2')

每个Store实例都有自己的隔离状态,使其非常适合管理多个独立组件。这种方法可以防止状态冲突并保持数据的正确组织。

主要优点:

  1. 每个组件实例的隔离状态
  2. 干净且可维护的代码
  3. 使用 TypeScript 实现类型安全
  4. 非常适合动态组件

翻译:前端测试指南:命名测试的 10 条基本规则

一个简易的文件共享系统的实现

评论区

评论加载中...