Vue、Nuxt：共通関数について

Question

Vue、Nuxtを使用しており、vue、storeファイルの両方から利用できる共通関数の作り方について、悩んでおります。
冗長化にならない作成方法について、ご助言いただけないでしょうか？

• ミックスインとして、共通関数を下記のように作成した場合、Vueファイルでは、test1、test2を指定すれば使用することができるが、storeファイル内で、test1を使用したい場合、使うことができません。

/plugin/mixinFunction.js
※nuxt.config.jsにpluginの設定をおこなうこととする

import Vue from 'vue'

Vue.mixin({
  methods: {
    test1(targetObj) {
      return xxx
    },
    test2(targetObj) {
      return xxx
    }
  }
})

• そのため、下記を作成してみましたが、storeファイルでは、利用することができましたが、Vueファイル内では、使用することができませんでした。

/plugin/util.js

export const utilFunctions = {
  test1(targetObj) {
    return xxx
  },
  test2(targetObj) {
    return xxx
  }
}

XXX.vue
import { utilFunctions } from '@/plugin/util'

• 「utilFunctions.test1」といった指定ができないです

---

ご回答いただき、下記のようにすることで、storeから利用できるようになりましたが、gettersの中では、this参照できないです。何か別に設定など必要であるかご存知でしょうか？

/plugin/test.js

const test = aaa => {
  console.log(aaa)
}

export default ({ app }, inject) => {
  inject('test', test)
}

storeファイル

• gettersではエラー

export const getters = {
  getTest: state => {
    this.$test('テストプラグイン')
  }
}

• actionsでは、OK

export const actions = {
  actionsTest({ commit, state }) {
    this.$test('テストプラグイン')
  }
}

よろしくお願いいたします。

Answer 1

いくつか方法はあると思いますが、Nuxt全体で利用したいのでしたらルートやコンテキストに注入されてはどうでしょうか。
詳細は公式のガイドをご覧ください。
アプリケーションのルートや context に注入する

Comments

[ss-nantoka]

ご回答ありがとうございます。
ガイドを参考に書いてみたのですが、追加の疑問が生じたため、質問に追記しました。
もし、ご存知であれば、ご助言いただけると幸いです。

[nt4c]

「これで context 、Vue インスタンス内での this 、及びストアの actions / mutations 内での this を通して、関数を使用することができます。」と公式にもある通りinjectした関数はストアゲッターからは利用できませんので、アクションで対応するか他の方法を取るしかありません。
できないと記載がありましたが外部ファイルにまとめてインポートする方法を再検討されてはどうでしょうか。通常はインポートはストアであろうとコンポーネントであろうとどこでも可能なはずですので

[ss-nantoka]

ありがとうございます。承知しました。
すみません、外部ファイルにまとめてインポートする方法ですが、どのようにすべきかイメージできないのですが、参考になるサイトやキーワードなどご助言いただけないでしょうか。
何度も申し訳ございません。

[nt4c]

試されていた方法で良いと思いますよ。『「utilFunctions.test1」といった指定ができない』とありましたが本来はページやコンポーネント内でも利用できると思いますので出来なかった原因を探ってみてください。

[ss-nantoka]

了解しました、ありがとうございます。