英文:
Are objects in reactive arrays reactive
问题
以下是翻译好的部分：
我有一个使用 Vue 3 的应用程序，它使用 Pinia 存储来存储一组 JavaScript 对象。
// QuestionStore.ts
export interface qn {
id: string,
text: string
}
const initStore = {
qnArray: <qn[]>[]
}
export const useQuestionStore = defineStore('QuestionStore', () => {
const displayedQuestions = reactive(structuredClone(initStore))
// 存储的 getter 和 setter
function getDisplayedQuestion(i: Number) { return displayedQuestions.qnArray[i] }
function setDisplayedQuestion(i: Number, q: qn) {
displayedQuestions.qnArray[i] = q
}
})
我想通过引用在我的应用程序组件中的存储中添加和修改对象。
在以下代码中，activeQn 是组件中的局部变量：
// MyComponent.vue
const activeQn: qn = reactive({...emptyQn})
// 行 1：将存储中的第一个问题设置为活动问题
activeQn = getDisplayedQuestion(0)
// 行 2：将活动问题设置为存储中的第二个问题
setDisplayedQuestion(1, activeQn)
目标是通过引用将 activeQn 传递到存储中，以便对 activeQn 的任何更新（例如通过用户输入）也自动反映在存储中。上述两行代码是否实现了这一目标？如果没有，我应该如何修改它们？
英文:
I have a Vue 3 application that uses a Pinia store to store an array of Javascript objects.
// QuestionStore.ts
export interface qn {
id: string,
text: string
}
const initStore = {
qnArray: <qn[]>[]
}
export const useQuestionStore = defineStore('QuestionStore', () => {
const displayedQuestions = reactive(structuredClone(initStore))
// Store getter and setter
function getDisplayedQuestion(i : Number) { return displayedQuestions.qnArray[i] }
function setDisplayedQuestion(i : Number, q : qn) {
displayedQuestions.qnArray[i] = q
}
})
I want to add and modify objects in the store by reference in my application's components.
In the following code, activeQn is a local variable in the component:
// MyComponent.vue
const activeQn : qn = reactive({...emptyQn})
// Line 1: Set first question in store as active question
activeQn = getDisplayedQuestion(0)
// Line 2: Set active question as second question in store
setDisplayedQuestion(1, activeQn)
The objective is to pass activeQn by reference into the store, so that any updates to activeQn (such as via user input) are also automatically reflected in the store. Do the above two lines of code accomplish this? If not, how should I modify them?
答案1
得分: 1
在Vue 3和Pinia中，响应式数组中的对象是响应式的。但是您当前的代码在更改activeQn时不会更新存储，因为每次赋值都会创建一个新引用。
为保持相同的引用，请不要重新分配activeQn。而是直接更改其属性。例如：
// MyComponent.vue
const activeQn = reactive({...getDisplayedQuestion(0)});
activeQn.text = "New text"; // 更改将反映在存储中
并且，不要替换存储中的问题，而是更新其属性：
// 在QuestionStore.ts中
function setDisplayedQuestion(i: Number, q: qn) {
Object.assign(displayedQuestions.qnArray[i], q);
}
通过这些更改，对activeQn的更新应该会反映在存储中。
希望这对您有帮助！🔧
英文:
In Vue 3 and Pinia, objects in a reactive array are reactive. But your current code doesn't update the store when you change activeQn because each assignment makes a new reference.
To keep the same reference, don't reassign activeQn. Instead, directly change its properties. For example:
// MyComponent.vue
const activeQn = reactive({...getDisplayedQuestion(0)});
activeQn.text = "New text"; // changes will reflect in store
And, instead of replacing the question in the store, update its properties:
// in QuestionStore.ts
function setDisplayedQuestion(i : Number, q : qn) {
Object.assign(displayedQuestions.qnArray[i], q);
}
With these changes, updates to activeQn should be reflected in the store.
Hope this helps! 🌷
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论