英文:
Re render in Vue3 - how to update component when store value changes
问题
<template>
<div>
<p>{{ num1 }}</p>
</div>
</template>
<script>
import { useCalcStore } from '@/store/store'
export default {
name: 'screenCalculator',
setup(){
const store = useCalcStore();
const reload = () => {
let num1 = store.getNumber1;
return num1
}
return {reload}
}
}
</script>
英文:
I am using the pinia store and I need to update a component in realtime. The variable num1 will be changing value from another component and I need to display the change in this component:
<template>
<div>
<p>{{ num1 }}</p>
</div>
</template>
<script>
import { useCalcStore } from '@/store/store'
export default {
name: 'screenCalculator',
setup(){
const store = useCalcStore();
const reload = () => {
let num1 = store.getNumber1;
return num1
}
return {reload}
}
}
</script>
I have tried to use the keys and forceUpdate but I haven't succeeded.
答案1
得分: 2
从存储中读取数据不应该在 reload 函数中完成。使用存储的整个目的是：它们保存在 state 或 getters（派生状态）中的响应式数据，可在导入它们的所有组件之间共享。
每当这些数据发生变化时，所有组件都会接收到变化并自动更新。
简而言之，这就是 响应性 的意义：实时自动更新的数据。
你当前的语法：
let num1 = store.getNumber1 // ❌ not reactive
...破坏了响应性，而使用以下任何替代语法都会保持它：
const num1 = storeToRefs(store).getNumber1 // ✅ reactive
const { getNumber1: num1 } = storeToRefs(store) // ✅ reactive
const num1 = computed(() => store.getNumber1) // ✅ reactive
num1 现在是一个 ref()，可用于 template，并将反映 store.getNumber1 的任何更改的值。
如果你在 <script> 中需要它的值，请使用 num1.value，就像对待任何其他的 ref 一样。
完整示例（我跳过了为 store 和 num1 创建 const，因为它们只使用一次，但 setup 返回一个 num1 ref 供 template 使用，指向 store.getNumber1）：
<template>
<p>{{ num1 }}</p>
</template>
<script>
import { useCalcStore } from '@/store/store'
import { storeToRefs } from 'pinia'
export default {
name: 'screenCalculator',
setup: () => ({
num1: storeToRefs(useCalcStore()).getNumber1
})
}
</script>
重要提示：storeToRefs 仅返回响应式的存储成员（state 和 getters）。
actions 可以从存储本身获取：
const { action1, action2 } = useSomeStore()
英文:
Reading from a store should not be done in a reload function.
The whole point of using stores is: they hold reactive data in state or getters (derived state), shared across all components importing them.
Whenever this data changes, all components receive the change, and update automatically.
In a nutshell, that's what reactivity means: realtime self-updating data.
Your current syntax:
let num1 = store.getNumber1 // ❌ not reactive
...breaks reactivity, while using any of the following alternative syntaxes maintains it:
const num1 = storeToRefs(store).getNumber1 // ✅ reactive
const { getNumber1: num1 } = storeToRefs(store) // ✅ reactive
const num1 = computed(() => store.getNumber1) // ✅ reactive
num1 is now a ref() which can be used in template and will reflect any change in store.getNumber1's value.
If you need its value inside <script>, use num1.value, like with any other ref.
Complete example (I skipped creating consts for store and num1, since they're only used once, but setup does return a num1 ref for <template>, pointing to store.getNumber1):
<template>
<p>{{ num1 }}</p>
</template>
<script>
import { useCalcStore } from '@/store/store'
import { storeToRefs } from 'pinia'
export default {
name: 'screenCalculator',
setup: () => ({
num1: storeToRefs(useCalcStore()).getNumber1
})
}
</script>
Important note: storeToRefs only returns reactive store members (state and getters).
actions can be obtained from the store itself:
const { action1, action2 } = useSomeStore()
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论