こんにちは、現役沖縄フリーランスエンジニアのmah（MaLanka）です。
このブログでは、
僕がIT未経験から約1年でフリーランスエンジニアになるまでの過程、
ノウハウなどを書いていきます。
今回は、
- 【Vue.js】methodsやcomputedを共通化(mixin)する
について書いていきます。
【Vue.js】methodsやcomputedを共通化(mixin)する
手順
１、共通化したいmethodsやcomputed等を記述したファイルを作成する。
例として utils.js を作成します。
パスは javascript/packs/mixins/utils.js とします。
以下は、moment.jsで日時をparseする関数です。
# utils.js
import moment from 'moment'
export default {
methods: {
startParse: function(start) {
return moment(start).format('YYYY-MM-DD')
},
endParse: function(end) {
return moment(end).format('YYYY-MM-DD')
}
}
}
２、１のmethodsを使用するコンポーネントに以下を記述します。
# some_component.vue
export default {
import utilsMixin from '../utils.jsへのパス'
mixins: [utilsMixin] // 上記mixinを使用する宣言
}
こうすると、
２のコンポーネント内で、
１のutils.jsで定義したmethodsを使用できます。
# some_component.vue
<td>{{ startParse(task.start) }}</td>
<td>{{ endParse(task.end) }}</td>
以上です。
Vue.jsや流行りのTypeScriptを学びたい人へ
Vue.js
、TypeScript
、React.js
を学習するなら、Udemyの下記のコースがおすすめ★
（自分も全て受講しました）
- Vue.js
✅Vue.js + Firebaseで作るシングルページアプリケーション
- TypeScriipt
✅ハンズオンで学ぶ TypeScript - JavaScript エンジニアのための TypeScript徹底入門
- React.js
✅フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門
