如何使pinia与vue3中的嵌套对象一起工作
如何使pinia与vue3中的嵌套对象一起工作
提问于 2022-06-04 12:17:26
如何获得更新嵌套属性的反应性组件：
我有一家皮尼亚商店，其定义如下
import { defineStore } from "pinia"
export const useStore = defineStore({
id: "poc",
state: () => ({ str: "", nested: { obj: "" } }),
persist: {
enabled: true,
strategies: [{ storage: localStorage }],
},
})和下面的vue3组件
<script lang="ts">
import { ref } from "vue"
import { storeToRefs } from "pinia"
import { useStore } from "./store"
export default {
setup() {
const store = useStore()
const example = storeToRefs(store)
const mStr = ref(example.str)
const mObj = ref(example.nested.value.obj) // <--- this is where I believe the problem is
store.str = mStr.value
store.nested.obj = mObj.value
return { mObj, mStr, store }
},
}
</script>
<template>
<h1>PoC</h1>
<input v-model="mObj" placeholder="obj" />
<input v-model="mStr" placeholder="str" />
</template>当我更新str字段时，它按预期工作，但对于嵌套对象，它不起作用。我怀疑我在调用nested.value时失去了反应性，也就是说，我不知道如何使它具有反应性。
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-06-04 14:21:33
再深入一点，https://github.com/vuejs/pinia/discussions/854终于让我自己想出了一个(更优雅的)解决方案。
<script lang="ts">
import { useStore } from "./store"
export default {
setup() {
const store = useStore()
return { store }
},
}
</script>
<template>
<h1>test</h1>
<input v-model="store.str" placeholder="obj" />
<input v-model="store.nested.obj" placeholder="str" />
</template>Stack Overflow用户
发布于 2022-09-30 10:18:04
FOR PINIA：析构状态签出:storeToRefs()
为了在保持其反应性的同时从存储中提取属性，需要使用storeToRefs()。它将为每个反应性属性创建参考文献。当您只使用存储区的状态，而不调用任何操作时，这是非常有用的。注意，您可以从商店直接分解操作，因为它们也绑定到商店本身。
<script>
import { useStore } from "./store"
import { storeToRefs } from 'pinia' // NOTE this
export default {
setup() {
const store = useStore()
const {str, nested } = storeToRefs(store)
return { str, nested }
},
}
</script>
<template>
<h1>test</h1>
<input v-model="str" placeholder="obj" />
<input v-model="nested.obj" placeholder="str" />
</template>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72499656
复制相关文章
相似问题
腾讯云开发者
