質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.04%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 64

POSTMAN

score 66

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="info@example.com"
                    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) {
    }
  }
}

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

試していませんが、 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)
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる