时间戳

首页 > 解决方案 > 如何在我的 NuxtJS 服务文件夹中访问它

javascript - 如何在我的 NuxtJS 服务文件夹中访问它

问题描述

您好，我在 VueMastery 中学习了 NuxtJS，我认为他们教的内容非常好。获取数据的模式包括异步获取、存储和服务。

页面/index.vue

<template>
  <div></div>
</template>

<script>
export default {
  mounted() {
    this.$myInjectedFunction("works in mounted");
  },
  async fetch({ store, app, req, env }) {
    await store.dispatch("scooby/getBanners", { page: 1 });
  }
};
</script>

商店/scooby.js

import ScoobyService from "@/services/ScoobyService.js";
export const state = () => ({
  banners: []
});
export const mutations = {
  SET_BANNERS(state, banners) {
    state.banners = banners;
  }
};
export const actions = {
  getBanners({ commit }, payload) {
    this.$myInjectedFunction("accessible in actions");
    const type = payload.type || 1;
    const params = `?ad_type=${type}&page=${payload.page}`;
    return ScoobyService.adBanner(params).then(response => {
      commit("SET_BANNERS", response.data);
    });
  }
};

服务/scoobyService.js

/* eslint-disable no-console */
import { scoobyApiClient, scoobyRequestSetup } from "@/assets/js/axios.js";

const apiModule = "scooby";

const resources = {
  adBanner: `/v1/member/banners`
};

export default {
  adBanner(getParams) {
    // this.$myInjectedFunction("accessible in actions");
    const body = {};
    const resource = `${resources.adBanner}/${getParams}`;
    const [api, req] = scoobyRequestSetup(resource, body, apiModule);

    return process.server
      ? scoobyApiClient.get(api, req)
      : scoobyApiClient.post(api, req);
  }
};

插件/组合注入.js

/* eslint-disable no-console */
export default ({ app }, inject) => {
  inject("myInjectedFunction", string => console.log("That was easy!", string));
};

nuxt.config.js

module.exports = {
  ...
    plugins: [
    "~/plugins/axios.js"
  ],
  ...
}

services/scoobyService.js无法访问该对象this，但store/scooby.js可以。如何访问services/scoobyService.js中的这个对象

标签： javascriptvue.jsnuxt.js

解决方案

您应该如下创建文件，然后您可以访问您的服务方法this.$customService

服务/CustomService.js

export default {
  hello() {
    return 'Hello'
  },
  bye() {
    return 'Bye'
  }
}

插件/组合注入.js

import Vue from 'vue'
import ServiceOnefrom '../services/ServiceOne'
Vue.prototype.$ServiceOne= ServiceOne

// or

// import ServiceOne from '../services/ServiceOne'
// export default ({ app }, inject) => {
//  inject("serviceOne", ServiceOne);
// };

推荐阅读