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')，这似乎是做同样的事情。

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

【问题讨论】：

标签： vue.js vue-component vuex vuejs3

【解决方案1】：

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

其中一部分是 javascript 问题，因为我更新 cart 的方式是用 API 调用替换对象的整个键，因此内部购物车键使用不同的引用进行更新。可以可视化问题here
我必须使用toRef，它与ref 略有不同，因为它专门用于从反应对象中提取反应键。我认为这只适用于解构，但它也适用于简单地说const cart = store.state.cart，因为当我更新购物车时，这个cart 变量将指向旧引用。 toRef 解决了这个问题：const cart = toRef(store.state, 'cart')

【讨论】：