时间戳

首页 > 解决方案 > Vue 3：为什么我的可组合不是响应式的？

vue.js - Vue 3：为什么我的可组合不是响应式的？

问题描述

我想在另一个中使用 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.jsvue-componentvuexvuejs3

解决方案

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

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

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

推荐阅读