如何在 Pinia 数组更改时更新多个 Vue 3 组件
How to update multiple Vue 3 comonents when Pinia array changes
我无法让访问同一个商店的多个组件响应更新,直到我弄乱 dom 元素来触发新渲染。
在我的 Pinia 商店中,我有一个数组和一个更新方法:
let MyArray: IMyItem[] = [
{ id: 1,
name: "First Item",
}, ....
let SelectedItem = MyArray[0]
const AddItem = ( n: string, ) => {
MyArray.push({ id: createId(), name: n, });
};
return { MyArray, SelectedItem, AddItem }
在一个 Vue 组件中,我有文本输入和一个调用商店方法的按钮:
function handle() {store.AddItem(name.value));
在另一个 Vue 组件中,在同一个父级上,我使用 for 循环显示允许选择一个项目:
<div v-for="item in store.MyArray">
<input type="radio"...
这些努力没有改变:
const { MyArray } = storeToRefs(store);
const myArray = reactive(store.MyArray);
// also watching from both components...
watch(store.MyArray, (n, o) => console.dir(n));
// also... lots of other stuff.
const myArray = reactive(store.MyArray);
watch(myArray, (n, o) => console.dir(n));
我还通过向商店的方法添加字符串 return 来尝试 <form @submit.prevent="handle">
触发 nextTick
。
我假设四处点击使它起作用的原因是因为我正在更改商店的 SelectedItem
,并且它的反应性需要重新渲染,因为它是 v-model
的标签。
文档说 Array.push 应该做它的工作...只是在 v-for
.
中使用时绑定方式不同
触发 dom 更新需要什么?谢谢!
正如评论所指出的,主要问题是您的商店状态未使用 Reactivity API 声明,因此状态更改不会触发观察者,也不会导致 re-render.
解决方案是将 MyArray
声明为 reactive
and SelectedItem
as a ref
:
// store.js
import { defineStore } from 'pinia'
import type { IMyItem } from './types'
import { createId } from './utils'
import { ref, reactive } from 'vue'
export const useItemStore = defineStore('item', () => {
let MyArray = reactive([{ id: createId(), name: 'First Item' }] as IMyItem[])
let SelectedItem = ref(MyArray[0])
const AddItem = (n: string) => {
MyArray.push({ id: createId(), name: n })
}
return { MyArray, SelectedItem, AddItem }
})
如果使用 storeToRefs()
,请确保在更新 SelectedItem
时设置 ref
的 .value
属性:
// MyComponent.vue
const store = useItemStore()
const { SelectedItem, MyArray } = storeToRefs(store)
const selectItem = (id) => {
SelectedItem.value = MyArray.value.find((item) => item.id === id)
}
但在这种情况下,直接使用 store
的 props 更简单:
// MyComponent.vue
const store = useItemStore()
const selectItem = (id) => {
store.SelectedItem = store.MyArray.find((item) => item.id === id)
}
我无法让访问同一个商店的多个组件响应更新,直到我弄乱 dom 元素来触发新渲染。
在我的 Pinia 商店中,我有一个数组和一个更新方法:
let MyArray: IMyItem[] = [
{ id: 1,
name: "First Item",
}, ....
let SelectedItem = MyArray[0]
const AddItem = ( n: string, ) => {
MyArray.push({ id: createId(), name: n, });
};
return { MyArray, SelectedItem, AddItem }
在一个 Vue 组件中,我有文本输入和一个调用商店方法的按钮:
function handle() {store.AddItem(name.value));
在另一个 Vue 组件中,在同一个父级上,我使用 for 循环显示允许选择一个项目:
<div v-for="item in store.MyArray">
<input type="radio"...
这些努力没有改变:
const { MyArray } = storeToRefs(store);
const myArray = reactive(store.MyArray);
// also watching from both components...
watch(store.MyArray, (n, o) => console.dir(n));
// also... lots of other stuff.
const myArray = reactive(store.MyArray);
watch(myArray, (n, o) => console.dir(n));
我还通过向商店的方法添加字符串 return 来尝试 <form @submit.prevent="handle">
触发 nextTick
。
我假设四处点击使它起作用的原因是因为我正在更改商店的 SelectedItem
,并且它的反应性需要重新渲染,因为它是 v-model
的标签。
文档说 Array.push 应该做它的工作...只是在 v-for
.
触发 dom 更新需要什么?谢谢!
正如评论所指出的,主要问题是您的商店状态未使用 Reactivity API 声明,因此状态更改不会触发观察者,也不会导致 re-render.
解决方案是将 MyArray
声明为 reactive
and SelectedItem
as a ref
:
// store.js
import { defineStore } from 'pinia'
import type { IMyItem } from './types'
import { createId } from './utils'
import { ref, reactive } from 'vue'
export const useItemStore = defineStore('item', () => {
let MyArray = reactive([{ id: createId(), name: 'First Item' }] as IMyItem[])
let SelectedItem = ref(MyArray[0])
const AddItem = (n: string) => {
MyArray.push({ id: createId(), name: n })
}
return { MyArray, SelectedItem, AddItem }
})
如果使用 storeToRefs()
,请确保在更新 SelectedItem
时设置 ref
的 .value
属性:
// MyComponent.vue
const store = useItemStore()
const { SelectedItem, MyArray } = storeToRefs(store)
const selectItem = (id) => {
SelectedItem.value = MyArray.value.find((item) => item.id === id)
}
但在这种情况下,直接使用 store
的 props 更简单:
// MyComponent.vue
const store = useItemStore()
const selectItem = (id) => {
store.SelectedItem = store.MyArray.find((item) => item.id === id)
}