タイトル: Mixinを利用した共通処理の記述方法
SEOタイトル: 【Vue.js】Mixinを利用した共通処理の記述方法
この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<thead>
<tr><th style="background-color:#f39c12;color:#ffffff;text-align:left">この記事の要点</th></tr>
</thead>
<tbody>
<tr>
<td style="background-color:#fef9e7">
<ul>
<li>Vue.js の <strong>Mixin</strong>: 複数コンポーネントで<strong>共通処理を流用</strong>する仕組み</li>
<li>共通処理を別ファイル (<code>Common.vue</code>) に <code>export default {...}</code> で書く</li>
<li>使う側で <code>import Common from "./Common.vue"</code> → <code>mixins: [Common]</code> を宣言</li>
<li>Vue 3 は<strong>Composition API（<code>useXxx()</code> 関数）</strong>のほうが推奨される</li>
</ul>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h2>共通の処理</h2>
<p>共通処理用のvueファイルを作成して以下の様に共通化したい処理を記述する。</p>
<p>内容はなんでもよい。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
<thead>
<tr>
<th scope="col" style="background-color:#ffffff"><span style="color:#e74c3c">Common.vue</span></th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color:#000000"><span style="color:#ffffff"><script><br />
export default {<br />
created() {<br />
this.getMessages()<br />
},<br />
data() {<br />
return {<br />
messages: [],<br />
}<br />
},<br />
methods: {<br />
getMessages() {<br />
axios<br />
.get('/api/message/list')<br />
.then(res => {<br />
this.messages = res.data<br />
})<br />
},<br />
}<br />
}<br />
</script></span><br />
</td>
</tr>
</tbody>
</table>
<p> </p>
<h2>共通処理を呼び出す処理</h2>
<p><span style="color:#e74c3c"><strong>mixins</strong></span>を使用して引数に共通処理のファイルを指定する。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
<thead>
<tr>
<th scope="col" style="background-color:#ffffff"><span style="color:null">Example.vue</span></th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff"><script><br />
</span><span style="color:#2ecc71">import Common from './Common.vue'</span></p>
<p><span style="color:#ffffff"> export default {<br />
</span><span style="color:#f1c40f">mixins</span><span style="color:#ffffff">: [</span><span style="color:#2ecc71">Common</span><span style="color:#ffffff">],<br />
created() {<br />
this.getChannelsTest()<br />
},<br />
data() {<br />
return {<br />
channels: [],<br />
}<br />
},<br />
methods: {<br />
getChannelsTest() {<br />
axios<br />
.get('/api/channels/test')<br />
.then(res => {<br />
this.channels = res.data<br />
})<br />
},<br />
}<br />
}<br />
</script></span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h2>共通処理を呼び出す処理を省略する方法</h2>
<p>全ての処理で使う場合は<span style="color:#e74c3c"><strong>main.js</strong></span>で指定すればよい。</p>
<p>そうすれば各コンポーネント内で呼び出す必要もなくなる。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
<thead>
<tr>
<th scope="col">main.js</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#2ecc71">import Common from './Common.vue'</span></p>
<p><span style="color:#f1c40f">Vue.mixin(</span><span style="color:#2ecc71">Common</span><span style="color:#f1c40f">)</span></p>
<p><span style="color:#ffffff">new Vue({<br />
el: '#app',<br />
router,<br />
render: h => h(App),<br />
})</span></p>
</td>
</tr>
</tbody>
</table>