Vue 在页面更改时注入

Posted 2023-02-22

【中文标题】Vue 在页面更改时注入

【英文标题】：Vue inject on page change

【发布时间】：2021-05-21 19:43:30

【问题描述】：

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

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

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

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

你知道我该怎么做吗？

【问题讨论】：

加载的组件是视图的子组件吗？还是完全不同的看法？提供用于后代组件

@shob 我明白了...这不是子组件，而是不同的视图。有什么方法可以注入不同的视图或替代方法吗？

是的，您可以从应用程序根目录或路由器视图根目录提供。请参阅this answer 了解几个选项或使用 Vuex。

【参考方案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 ;