Node-RED と Vue 3 が連携したプロジェクトで Vue 側に vue-axios を使わずよりシンプルに axios を導入するメモです。

やりたいこと

https://www.1ft-seabass.jp/memo/2021/09/06/node-red-and-vue3-and-axios-collaboration-basic/

先日書いた、こちらの記事で、どこでも axios が呼びだせる設計にしなくてもいいよなと思い、vue-axios を使わずに、つどつどページごとで呼び出す形でシンプルに axios を導入してみます。

前回の仕組みを改修してみる

https://www.1ft-seabass.jp/memo/2021/09/06/node-red-and-vue3-and-axios-collaboration-basic/

をベースに進めます。

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></h1>
        <!-- 追記 -->
        <h3></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 で起動する開発サーバーで動かしてみます。

うん。狙い通り、ページごとに呼び出す形で機能していますね。こっちのほうがシンプル。

グローバルに置いてしまうと、プログラムの流れが分かりにくくなってしまうデメリットがあるので、この実装もいいですね！