有没有在 NuxtJs 中暴露商店、路由器等的好方法？答案

【问题标题】：Is there a good way to expose store, router, etc in NuxtJs?有没有在 NuxtJs 中暴露商店、路由器等的好方法？
【发布时间】：2021-09-02 11:15:02
【问题描述】：

这是一个问题。我想创建一个适用于 store 的实用程序文件。类似于切换叠加层的东西。就像是 /utils/loading.js：

import { getStore } from '@/utils/store';

export const toggleOverlay = (toggleTo) => {
  const store = getStore();
  store.dispatch('App/toggleOverlay', toggleTo);
}

对于 SPA 来说，这通常是一件容易的事。但是nuxt让我陷入了困境。好像没有什么好办法。我在互联网上的所有搜索都没有结果。到这里我就束手无策了。

【问题讨论】：

标签： javascript vuejs2 nuxt.js vuex

【解决方案1】：

将您的商店或操作从 vuex 传递到实用程序函数（作为参数）。

您可以使用 this.$store 或 vuex 映射助手访问商店。

【讨论】：

问题来了，我不能这样创建实用函数的层次结构，否则我将不得不将参数从一个传递到另一个。它会使整个链条变得混乱，但仍然会使我的函数与存储/组件上下文相结合。

【解决方案2】：

找到了方法。这有点……笨拙，并且前提是我的布局将包含一个组件。无论如何，这是一个对我有用的解决方案：

// dependencyProvider.js
const dependencyProvider = {
  getInstance: null,
  getStore() {
    return this.getInstanceProp('$store');
  },
  getRouter() {
    return this.getInstanceProp('$router');
  },
  getAxios() {
    return this.getInstanceProp('$axios');
  },
  getInstanceProp(propName) {
    if (!this.getInstance) return null;
    const vm = this.getInstance();
    return vm[propName];
  },
};

export default dependencyProvider;

// DependencyProvider.vue
<script>
import dependencyProvider from '@/helpers/dependencyProvider';

export default {
  created() {
    const vm = this;
    const getInstance = () => vm;
    dependencyProvider.getInstance = getInstance;
    Object.seal(dependencyProvider);
  },
  render() {
    return null;
  },
};
</script>

如果有更复杂的方法可以做到这一点，我真的很想知道。

【讨论】：