使用 nuxt 开发网站 之 如何将 api 进行分离？

最近在做一个官网，要求国际化。首先想到的是使用 nuxt vue 来开发。nuxt 文档说明很清楚，支持国际化、支持服务端渲染、支持自定义页面关键词、描述等有利于SEO 的配置。目前项目开发已经进行到一半。关键的和需要注意的地方和代码在这里记录一下，毕竟是第一次使用nuxt，希望以后在使用时看到自己的进步。

• api 分离。虽然这个网站比较简单，每个页面都有一两个接口，完全可以不使用api分离，但是个人还是用来，可能有某种强迫症趋势着我，也许成熟后才能会学克制。分离主要代码：/api/index.js

  const modulesFiles = require.context("./apilist", true, /\.js$/);
  const modules = modulesFiles.keys().reduce((modules, modulePath) => {
    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
  
    const value = modulesFiles(modulePath);
  
    modules[moduleName] = value.default || value;
  
    return modules;
  }, {});
  
  export default modules;

  在 /api/apilis/ 文件夹下建立 页面对应的 js 文件，例如：新建首页（index.）对应的api 文件 index.js :

  export default axios => ({
      /**
       * 首页数据
       */
      index(){
          return axios.get(`/api/home`)
      },
      /**
       * 首页 - 环保数据
       */
      getReduceNumber() {
         return axios.get('/api/home_number')
      }
  })  

  就这样就ok啦！调用api时，也要注意哦：

• 如何调用api？例如在首页index.vue 中调用，当你在 asyncData 中需要调用时： app.$api.index.index()  如果在方法中调用： this.$api.index.getReduceNumber() 

   

• 为什么会有 $api ？ 当然这里需要注入到 vue 实例中，name在nuxt中如何注入呢？话不多说，直接上代码：

  import apis from '~/api/index'
  // 这里ctx也可以访问到store
  export default (ctx, inject) => {
    // 注入上下文
    // 挂载到vue实例上面 (组件中使用：this.$api)
    const locale = ctx.params.lang || ctx.store.state.locale || ctx.app.i18n.fallbackLocale
    ctx.$axios.setBaseURL(`your_domain/${locale}`)
    // console.log(process.server,ctx.$axios.defaults.baseURL)
    var apiObject = {};
    for (var i in apis) {
      apiObject[i] = apis[i](ctx.$axios);
    }
   
    //inject:注入到服务端context, vue实例, vuex中
    inject("api", apiObject);
  }