nuxt.jsのplugin内で、@nuxtjs/axiosが使えない

Question

nuxt.jsでVeeValidateを使いたくて以下を参考にセットアップしました。
Nuxt.jsでバリデーションするためにVeeValidateを使う

DBの値と比較するカスタムルールを作りたくて以下を自作しました。
実際にAPI側は実装していてpostmanで確認しています。

肝心のaxiosで接続するところで、getがないと言われています。

// plugins/vee-validate.js

import Vue from 'vue'
import { extend, localize, ValidationObserver, ValidationProvider } from 'vee-validate' // 使用する機能
import ja from 'vee-validate/dist/locale/ja.json' // エラーメッセージの日本語化用
import * as rules from 'vee-validate/dist/rules' // 全てのバリデーションルール


// forループで全てのバリデーションルールをextendで登録する
for (const key in rules) {
  // eslint-disable-next-line import/namespace
  extend(key, rules[key])
}

// カスタムバリデーションルール追加。todo:: 別ファイルへ切り分けて上記のように繰り返しでextendしたい。
const exists = {
  params: ['table', 'column'],
  message: '指定された{_field_}は存在しません。',
  validate (value, { table, column }) {
    // todo::paramsの精査。500を返したい。
    if (!table || !column) {
      alert('ルール記述に漏れがあります。')
    }
    const params = {
       value,
       table,
       column
    }

    console.log(this)

    // this.axios.get('/rules/exists', params)
    //   .then((response) => {
    //     console.log(response)
    //     // return response.data
    //   })
  }
}
extend('exists', exists)

Vue.component('ValidationProvider', ValidationProvider)
Vue.component('ValidationObserver', ValidationObserver)
localize('ja', ja)

// 使う側。
                <ValidationProvider name="email" rules="required|max:50|email|exists:User, email">
                  <v-text-field
                    v-model="email"
                    slot-scope="{errors, valid}"
                    counter="50"
                    :error-messages="errors"
                    :success="valid"
                    placeholder="[e-mail]"
                    required
                  ></v-text-field>
                </ValidationProvider>

nuxt.jsで、'@nuxtjs/axios'を使っているのですが、
console.log(this)やconsole.log(this.context)やconsole.log(axios)
また

  validate (value, { $axios, table, column }) {
    console.log($axios)
  }

などでどうにかaxiosを取得したいのですが、全部ダメで途方にくれています。

validate内でthisを使っているので、appのコンテキストではないんですよね。。。

computesRequired: false
lazy: false
message: ƒ (field, values)
params: (2) [{…}, {…}]
validate: ƒ validate(value, _ref)

上記はplugin内ですが、適当なpageコンポーネントで以下を実行して確認するとnuxt.config.jsで設定しているエンドポイントが確認できます。

  mounted () {
    console.log(this.$axios.defaults.baseURL)
  }

import axios from 'axios'を使えばaxiosは使えますが、console.log(axios.defaults.baseURL)で確認するとundefinedが返ってくるので、@nuxtjs/axiosの方を使いたいのです。

nuxt.config.jsも一応載せておきます。

const colors = require('vuetify/es5/util/colors').default
const environment = process.env.NODE_ENV || 'development'
const envEnvironment = require(`./env.${environment}.js`)
const envCommon = require(`./env.js`)
const envSet = Object.assign(envCommon, envEnvironment)

module.exports = {
  mode: 'universal',
  env: envSet,
  /*
  ** Headers of the page
  */
  head: {
    // titleTemplate: '%s - ' + process.env.npm_package_name,
    titleTemplate: '%s - ' + envSet.site_name,
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/axios',
    '@/plugins/day',
    '@/plugins/parts',
    '@/plugins/vee-validate'
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    '@nuxtjs/eslint-module',
    '@nuxtjs/vuetify'
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    'nuxt-fontawesome',
    '@nuxtjs/axios'
  ],
  /*
  ** vuetify module configuration
  ** https://github.com/nuxt-community/vuetify-module
  */
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      light: true,
      themes: {
        light: {
          primary: colors.cyan.base,
          secondary: colors.lime.base,
          accent: colors.pink.base,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        },
        dark: {
          primary: colors.blue.darken2,
          secondary: colors.amber.darken3,
          accent: colors.grey.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },
  fontawesome: {
    imports: [
      {
        set: '@fortawesome/free-solid-svg-icons',
        icons: ['fas']
      }
    ]
  },
  axios: {
    browserBaseURL: envSet.apiBaseUrl.client,
    baseURL: envSet.apiBaseUrl.express
  },
  /*
  ** Build configuration
  */
  build: {
    transpile: [
      'vee-validate/dist/rules'
    ],
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  }
}

最初の諸々設定はもうやりたくない。。。

Answer 1

試していませんが、 plugins/vee-validate.js に以下のように追記したら動いたりしませんか。

export default ({ $axios }, inject) => {
  // カスタムバリデーションルール追加。todo:: 別ファイルへ切り分けて上記のように繰り返しでextendしたい。
  const exists = {
    params: ['table', 'column'],
    message: '指定された{_field_}は存在しません。',
    async validate (value, { table, column }) {
      // todo::paramsの精査。500を返したい。
      const params = {
        value,
        table,
        column
      }
      const response = await $axios.get('/rules/exists', params)
      return response.data
    }
  }
  extend('exists', exists)
}

※追記

forループで登録したいようなので、このようにしたら動くかもしれません。

// plugins/vee-validate.js
import Vue from 'vue'
import { extend, localize, ValidationObserver, ValidationProvider } from 'vee-validate' // 使用する機能
import ja from 'vee-validate/dist/locale/ja.json' // エラーメッセージの日本語化用
import * as rules from 'vee-validate/dist/rules' // 全てのバリデーションルール
import * as myRules from '@/rules' // 全てのカスタムバリデーションルール

// forループで全てのバリデーションルールをextendで登録する
for (const key in rules) {
  // eslint-disable-next-line import/namespace
  extend(key, rules[key])
}

Vue.component('ValidationProvider', ValidationProvider)
Vue.component('ValidationObserver', ValidationObserver)
localize('ja', ja)

export default ctx => {
  for (const key in myRules) {
    // eslint-disable-next-line import/namespace
    extend(key, myRules[key](ctx))
  }
}

// rules.js
const exists = ({ $axios }) => ({
  params: ['table', 'column'],
  message: '指定された{_field_}は存在しません。',
  async validate (value, { table, column }) {
    // todo::paramsの精査。500を返したい。
    const params = {
      value,
      table,
      column
    }
    const response = await $axios.get('/rules/exists', params)
    return response.data
  }
})

export { exists }
// 増えていく場合はこう
// export { exists, hoge, fuga }

Comments

[退会済みユーザー]

返事が遅くなりすみません。

上記で$axiosにアクセスできるようにはなったのですが、カスタムルールが複数ありましてもう一方がuniqueなのですが、同じようにplugins/vee-validate.jsにexportから記述して中身だけuniqueにすれば良いと思ったのですが、１ファイルにexportは１つしかかけないようで困っています。。。

まず、別ファイルに切り分けたいと思ってrules/exists.jsなるものを作って
そこで、extend('exists', exists)をのぞいて記述したものを
plugins/vee-validate.jsでimportして、extend('exists', exists)してみたのですが動かないようです。。。

[aaharu]

ファイルを分けなくても、export defaultの上の部分に他のextendを書くなり、extend('exists', exists)の下に他のextendを書いても動くと思います。

[退会済みユーザー]

以下のように繰り返しで登録させたいのですが、ファイルを分けた時に、({ $axios }, inject)が邪魔をしているようで、登録がされないんです。。。

for (const key in rules) {
// eslint-disable-next-line import/namespace
extend(key, rules[key])
}

exportしたいのは、const existsの中身なのですが、何かご存知ないでしょうか。。。

[aaharu]

回答に追記しました。

[退会済みユーザー]

ありがとうございます！
まだ試していないのですが時間があるときに試してみます！

[退会済みユーザー]

こんばんは！
vee-validateの繰り返し登録と比較して、

(ctx)

というものがあると思うのですが、これは何なのでしょうか？
コンテキストかな〜とは思うのですが、なぜextend(key, myRules[key](ctx))
のように最後につけているのかがわからないのです。

[aaharu]

ctx はお察しの通りコンテキストです。
axios-module はコンテキストに axios インスタンスを挿入しているので、プラグインで参照したいのであれば、コンテキストから取得するのがよいと思います。
https://github.com/nuxt-community/axios-module/blob/v5.8.0/lib/plugin.js#L200

extend(key, myRules[key](ctx)) は axios を使いたいので、 rule に対して引数でコンテキストを渡しています。（ myRules[key] はコンテキストを引数にとる関数です。）
受け取る側は ({ $axios }) として、オブジェクトの分割代入で、コンテキストのうち $axios だけを受け取っています。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring
分割代入使って書きましたが、別にここは $axios だけ引数で渡してもいいです。