Question

所以我有一个提供对象的视图。

setup(){
  provide('string', {foo: 'bar'})
}

在使用 vue-router 更改页面时，我希望加载的组件注入该字符串，但我未定义。

setup() {
  const foo = inject('string')
}

你知道我怎样才能做到这一点吗？

Answer 1

按照@shob 的指示，我最终构建了一个自定义钩子，以便我可以访问任何组件中的信息。我把它留在这里以防将来有人需要它。

import { provide, inject } from 'vue';
import cartProducts from '@/resources/CartProducts.ts';

const itemsSymbol = Symbol();

const provideCartBasket = (): void => {
  const items = cartProducts;
  provide(itemsSymbol, items);
};

const useCartBasket = () => {
  const cartItems = inject(itemsSymbol);
  if (!cartItems) {
    console.log('No items available');
  }
  return cartItems;
};

export { provideCartBasket, useCartBasket };

Vue 在页面更改时注入

1 个答案: