Vue 3：为啥我的可组合不是反应式的？

Posted 2023-02-23

【中文标题】Vue 3：为啥我的可组合不是反应式的？

【英文标题】：Vue 3: Why is my composable not reactive?Vue 3：为什么我的可组合不是反应式的？

【发布时间】：2021-10-22 09:58:36

【问题描述】：

我想在另一个中使用 1 个可组合。我的第一个可组合基本上是 Vuex 的超轻量级版本：

import 
  reactive,
  readonly,
 from 'vue';

const state = reactive(
  settings: 
    loading: true,
  ,
  cart: 
    loading: true,
    items: [],
  ,
);

export default 
  state: readonly(state),
;

当我尝试在另一个可组合中使用它时，cart 没有反应。

在我的其他组合中，我有：

import store from '@/store';
watch(store.state.cart, () => 
  console.log('test');
);

而且它似乎对任何事情都没有反应。当我尝试在其上调用.value 时，它未定义，就好像它不是代理一样。

我也尝试过使用inject('store')，这似乎是做同样的事情。

我想看看购物车的任何部分何时发生变化。

【参考方案1】：

答案很长而且很复杂，但基本上可以归结为：

其中一部分是 javascript 问题，因为我更新 cart 的方式是用 API 调用替换对象的整个键，因此内部购物车键使用不同的引用进行更新。可以可视化问题here

我必须使用toRef，它与ref 略有不同，因为它专门用于从反应对象中提取反应键。我认为这只适用于解构，但它也适用于简单地说const cart = store.state.cart，因为当我更新购物车时，这个cart 变量将指向旧引用。 toRef 解决了这个问题：const cart = toRef(store.state, 'cart')