当前位置：首页 > news >正文

vue3响应式丢失解决办法（三）

news 来源：原创 2025/5/17 9:24:48

vue3的响应式的理解，与普通对象的区别（一）

vue3 分析总结响应式丢失问题原因（二）

经过前面2篇文章，知道了响应式为什么丢失了，但是还是碰到了丢失情况，并且通过之前的内容还不能解决。这里要解决响应式丢失问题需要用到几个函数：toRef、toRefs与storeToRefs。

const state = reactive({
  a: 1,
  b: 2
});

比如上面一个响应式对象state ，该对象在其他组件或者页面需要修改属性a的值，如何保证响应性不丢失？

通过第二篇文章，我们知道state.a 返回的是一个普通对象，而不是代理对象，即没有响应性。如果直接ref(state.a) 是可以创建一个ref对象，但是修改这个对象的值，并不会修改state.a。此时如果只根据前面2篇文章，是无法解决的。但前面知识可以让我们知道原理，以及为什么没有响应性。即获取不到正确的代理对象。

toRef和toRefs使用如下：

import { reactive, toRefs } from 'vue';
 
const state = reactive({
  a: 1,
  b: 2
});
 
const { a, b } = toRefs(state);

const aRef = toRef(state, 'a');
 
// 现在 a 和 b 以及 aRef  都是 ref 对象，可以单独被响应式地处理

storeToRefs如下：

import { useStore } from 'vuex';
import { storeToRefs } from 'vuex';
 
export default {
  setup() {
    const store = useStore();
    const { count } = storeToRefs(store.state); // 将 count 转换为 ref
 
    // 现在 count 可以被单独响应式地处理
    return { count };
  }
}

主要区别：

用途：toRef、toRefs 用于将普通的响应式对象（例如由 reactive 创建的对象）的属性转换为 ref，而 storeToRefs 用于将状态转换为 ref，使其在组合式 API 中更易于使用。
来源：toRef、toRefs 是 Vue 3 的全局 API，而 storeToRefs 是状态管理的特定功能。
适用场景：使用 toRef、toRefs 可以让你在任何响应式对象上工作，而 storeToRefs 是为了更好地集成状态管理和 Vue 3 的组合式 API。

总结

选择使用 toRef、toRefs 还是 storeToRefs 取决于你的具体需求和使用的库。如果你只是需要在一个普通的响应式对象上工作，使用 toRefs 就足够了。而如果你在使用状态管理并希望在组合式 API 中更方便地访问 store 的状态，那么 storeToRefs 会是一个更好的选择。