原文地址:dynamic-pinia-stores
今天我学习了如何通过生成唯一的商店 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 实现类型安全
- 非常适合动态组件
评论区
评论加载中...