通过Vue.js 3实现增强的组合性和响应性。
P粉935883292
2023-08-03 15:58:35
<p>给定以下在Vue.js 3中的组合式 'useNumbers.js'，我希望组件中的 'numbers' 具有响应性。但是，在一个组件中添加新的值到 'numbers' 中并不会在第二个组件中反映出来。<br /><br />useNumbers.js:</p><p><br /></p>
<pre class="brush:php;toolbar:false;">import { ref } from 'vue';
export default function() {
const numbers = ref([1, 2, 3, 4, 5]);
const addNumber = num => {
numbers.value.push(num);
}
const filterNumber = minNum => {
return numbers.value.filter(curNum => curNum >= minNum);
}
return { numbers, addNumber, filterNumber }
}</pre>
<p>Component A:</p>
<pre class="brush:php;toolbar:false;"><template>
<div>
<h1>Child component</h1>
<p>{{ numbers }}</p>
<button @click="addNumber(45)">Add 45</button>
<div class="line"></div>
<GrandChild />
</div>
</template>
<script setup>
import useNumbers from '../composables/useNumbers';
import GrandChild from './GrandChild.vue';
const { numbers, addNumber } = useNumbers()
</script></pre>
<p>Component B:</p>
<pre class="brush:php;toolbar:false;"><template>
<div>
<h1>GreatGrandChild component</h1>
<p>{{ numbers }}</p>
<div class="line"></div>
</div>
</template>
<script setup>
import useNumbers from '../composables/useNumbers';
const { numbers } = useNumbers();
</script></pre>
<p>每当我在组件A中点击按钮（将45添加到数组中），这个变化不会在组件B中反映出来。我知道，像解构赋值这样的操作会导致丢失响应性。</p>
<pre class="brush:php;toolbar:false;">const { numbers, addNumber } = useNumbers()</pre>
<p>破坏了响应性。我尝试使用toRef和toRefs进行了一些尝试，但目前还没有找到解决方案。</p>
您的问题的主要原因是每次调用useNumbers函数时，都会创建一个新的numbers对象实例。因此，每个组件都有自己的numbers副本，这些副本在组件之间不共享。
使用store
为了在多个useNumbers实例之间保持相同的状态，您可以将状态提升到函数外部，这样它只会被创建一次。
import { ref } from 'vue'; const numbers = ref([1, 2, 3, 4, 5]); export default function() { ... return { numbers } }Vue Playground example