Vue 在页面更改时注入

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 在页面更改时注入

Vue inject on page change

vuejs3

inject

vue-composition-api