【翻译】Vue 3 中的动态 Pinia Store

作者是Alex，德国程序员，写了很多优质的文章，专注于Vue，AI和GraphQL等前沿技术。你可以点击下面的链接访问他的博客，获取更多优质内容。

ヾ(•ω•`)o

让我们开始这次精彩的阅读吧！

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

操作方法如下：

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

        return { data }
    })()
}

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

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

主要优点：

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

【翻译】Vue 3 中的动态 Pinia Store

Alex

评论区