Node-RED と Vue 3 が連携したプロジェクトで Vue 側に vue-axios を使わずよりシンプルに axios を導入するメモです。
やりたいこと
Node-RED と Vue 3 が連携したプロジェクトで Vue 側に axios を導入し Node-RED http ノードと連携するメモ
先日書いた、こちらの記事で、どこでも axios が呼びだせる設計にしなくてもいいよなと思い、vue-axios を使わずに、つどつどページごとで呼び出す形でシンプルに axios を導入してみます。
前回の仕組みを改修してみる
Node-RED と Vue 3 が連携したプロジェクトで Vue 側に axios を導入し Node-RED http ノードと連携するメモ
をベースに進めます。
axios のインストールや CORS の設定は済んでいる状態です。
main.js の修正
axios の呼び出しがないので、Bootstrap を導入したものに戻っています。
import { createApp } from 'vue' import App from './App.vue' import 'bootstrap' import 'bootstrap/dist/css/bootstrap.css' createApp(App).mount('#app')
NodeRED コンポーネントを修正
vue-node-red-view/src/components/NodeRED.vue を以下のように書き換えます。
<template> <div class="row"> <div class="row"> <div class="col-sm"> <h1>{{infoTitle}}</h1> <!-- 追記 --> <h3>{{timeStamp}}</h3> </div> </div> <div class="row"> <div class="col-sm"> <ul class="list-group"> <li class="list-group-item">An item</li> <li class="list-group-item">A second item</li> <li class="list-group-item">A third item</li> <li class="list-group-item">A fourth item</li> <li class="list-group-item">And a fifth one</li> </ul> </div> </div> </div> </template> <script> // 追記 import axios from 'axios' export default { name: 'NodeRED', props: { msg: String }, data () { return { infoTitle: "Node-RED INDEX", timeStamp: 0 } }, methods: { // 追記 getTimestamp:async function(){ const response = await axios.get('http://localhost:18801/api1'); console.log(response); this.timeStamp = response.data.timestamp; } }, mounted () { // 追記 this.getTimestamp(); } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
import axios from 'axios'
を追記して、 await this.axios.get('http://localhost:18801/api1');
の呼び出しを await axios.get('http://localhost:18801/api1');
にして、さっき import で設定したほうに参照先を変えています。
確認してみる
npm run serve
で起動する開発サーバーで動かしてみます。
うん。狙い通り、ページごとに呼び出す形で機能していますね。こっちのほうがシンプル。
グローバルに置いてしまうと、プログラムの流れが分かりにくくなってしまうデメリットがあるので、この実装もいいですね!