Vue CLIにてjsファイルをインポートし、関数を実行する

Question

Vue CLIで生年月日のプルボックスを表示させているのですが、生年月日を表示させている部分の関数を、外部のjsファイルから読み込んで表示させたいのですがうまくいかないです。どうすれば良いか、ご教授よろしくお願いします。生年月日の部分のコードは以下になります。

<template>
    <div class="box">
      <p>生年月日</p>
      <div id="selectDate">
        <select v-model="year" @change="get_days">
          <option v-for="n in 50" :value="n + 1980" :key="n + 1980">
            {{ n + 1980 }}
          </option></select
        >年
        <select v-model="month" @change="get_days">
          <option v-for="n in 12" :value="n" :key="n">
            {{ n }}
          </option></select
        >月
        <select v-model="day">
          <option v-for="n in days_max" :value="n" :key="n">
            {{ n }}
          </option></select
        >日
      </div>
</div>
</template>
 <script>
export default {
  data() {
    return {
      year: 2018,
      month: 1,
      day: 1,
      days_max: "1",
    };
  },
  methods: {
    get_days() {
      this.days_max = new Date(this.year, this.month, 0).getDate();
    },
  },
};
</script>

これの、関数部分を外部のjsファイルに置き換えたくて、以下のように書き換えました

<script>
import common from "../helpers/definition";
export default {
  methods: {
    get_days(){
      common.get_days();
    }
  },
}
</script>

function get_days() {
  this.days_max = new Date(this.year, this.month, 0).getDate();
}

export default {
  get_days,
};

どうすれば良いでしょうか？
よろしくお願いします

Answer 1

jsファイルが読み込み自体はできているとして、外部jsファイルの関数でVueのstateを直接呼び出すことはできません。
vueのmethodではthisはvueインスタンスを指してくれますが、外部の関数内でのthisは関数自信を指しているので、実行はできてもthis.days_maxを直接参照できないので変更は起こらないでしょう。

解決策は２通りあります。
1つ目はmixinの機能を使うことです。stateごと外に吐き出すので他のコンポーネントに全く同じ動きで使い回すならば便利です。結果を代入する変数が変わってくるなら2つ目の方がいいかと思います。https://jp.vuejs.org/v2/guide/mixins.html

2つ目は、ロジックだけ外に吐き出し、代入はコンポーネントで素直に書くことです。こちらの方が僕は好きですが、読み込んで完成みたいなプラグインのイメージを想像するならmixinの方が当てはまります。

methods: {
  get_days() {
    this.days_max = common.get_days(this.year, this.month);
  },
},


function get_days(year, month) {
  return new Date(year, month, 0).getDate();
}

Comments

[cyacya.0325]

できました
ありがとうございます