data.json の一部を長野県専用のレポジトリから動的に読み込み

components/cards/ConfirmedCasesAttributesCard.vue

@@ -126,7 +126,7 @@
 </i18n>
 
 <script>
-import Data from '@/data/data.json'
+// import Data from '@/data/data.json'
 import formatGraph from '@/utils/formatGraph'
 import formatTable from '@/utils/formatTable'
 import DataTable from '@/components/DataTable.vue'
@@ -136,6 +136,8 @@ export default {
     DataTable
   },
   data() {
+    const Data = this.$store.state.data.data
+
     // 感染者数グラフ
     const patientsGraph = formatGraph(Data.patients_summary.data)
     // 感染者数

components/cards/ConfirmedCasesDetailsCard.vue

@@ -37,7 +37,7 @@
 </i18n>
 
 <script>
-import Data from '@/data/data.json'
+// import Data from '@/data/data.json'
 import formatConfirmedCases from '@/utils/formatConfirmedCases'
 import SvgCard from '@/components/SvgCard.vue'
 import ConfirmedCasesTable from '@/components/ConfirmedCasesTable.vue'
@@ -48,6 +48,8 @@ export default {
     ConfirmedCasesTable
   },
   data() {
+    const Data = this.$store.state.data.data
+
     // 検査陽性者の状況
     const confirmedCases = formatConfirmedCases(Data.main_summary)
 

components/cards/ConfirmedCasesNumberCard.vue

@@ -42,7 +42,7 @@
 </i18n>
 
 <script>
-import Data from '@/data/data.json'
+// import Data from '@/data/data.json'
 import formatGraph from '@/utils/formatGraph'
 import TimeBarChart from '@/components/TimeBarChart.vue'
 
@@ -51,6 +51,8 @@ export default {
     TimeBarChart
   },
   data() {
+    const Data = this.$store.state.data.data
+
     // 感染者数グラフ
     const patientsGraph = formatGraph(Data.patients_summary.data)
 

components/cards/ConsultationDeskReportsNumberCard.vue

@@ -55,7 +55,7 @@
 </i18n>
 
 <script>
-import Data from '@/data/data.json'
+// import Data from '@/data/data.json'
 import formatGraph from '@/utils/formatGraph'
 import TimeBarChart from '@/components/TimeBarChart.vue'
 
@@ -64,6 +64,8 @@ export default {
     TimeBarChart
   },
   data() {
+    const Data = this.$store.state.data.data
+
     // 帰国者・接触者電話相談センター相談件数
     const querentsGraph = formatGraph(Data.querents.data)
 

components/cards/MetroCard.vue

@@ -71,7 +71,7 @@
 </i18n>
 
 <script>
-import Data from '@/data/data.json'
+// import Data from '@/data/data.json'
 import MetroData from '@/data/metro.json'
 import MetroBarChart from '@/components/MetroBarChart.vue'
 
@@ -80,6 +80,8 @@ export default {
     MetroBarChart
   },
   data() {
+    const Data = this.$store.state.data.data
+
     // 都営地下鉄の利用者数の推移
     const metroGraph = MetroData
     // metroGraph ツールチップ title文字列

components/cards/TelephoneAdvisoryReportsNumberCard.vue

@@ -55,7 +55,7 @@
 </i18n>
 
 <script>
-import Data from '@/data/data.json'
+// import Data from '@/data/data.json'
 import formatGraph from '@/utils/formatGraph'
 import TimeBarChart from '@/components/TimeBarChart.vue'
 
@@ -64,6 +64,8 @@ export default {
     TimeBarChart
   },
   data() {
+    const Data = this.$store.state.data.data
+
     // 相談件数
     const contactsGraph = formatGraph(Data.contacts.data)
 

components/cards/TestedNumberCard.vue

@@ -69,14 +69,16 @@
 </i18n>
 
 <script>
-import Data from '@/data/data.json'
+// import Data from '@/data/data.json'
 import TimeStackedBarChart from '@/components/TimeStackedBarChart.vue'
 
 export default {
   components: {
     TimeStackedBarChart
   },
   data() {
+    const Data = this.$store.state.data.data
+
     // 検査実施日別状況
     const inspectionsGraph = [
       Data.inspections_summary.data['都内'],

middleware/getData.js

@@ -0,0 +1,5 @@
+export default async ({ store }) => {
+  if (!Object.keys(store.state.data.data).length) {
+    await store.dispatch('data/getDataAction')
+  }
+}

nuxt.config.ts

@@ -4,6 +4,14 @@ const autoprefixer = require('autoprefixer')
 
 const config: Configuration = {
   mode: 'universal',
+  /*
+   ** Environments
+   */
+  env: {
+    dataUrl:
+      process.env.DATA_URL ||
+      'https://raw.githubusercontent.com/wataruoguchi/covid19_nagano_csv_to_json/master/src/.json/data.json'
+  },
   /*
    ** Headers of the page
    */
@@ -188,6 +196,12 @@ const config: Configuration = {
    ** See https://axios.nuxtjs.org/options
    */
   axios: {},
+  /*
+   ** Nuxt.js router
+   */
+  router: {
+    middleware: ['getData']
+  },
   /*
    ** vuetify module configuration
    ** https://github.com/nuxt-community/vuetify-module

pages/cards/_card.vue

@@ -99,7 +99,7 @@
 </i18n>
 
 <script>
-import Data from '@/data/data.json'
+// import Data from '@/data/data.json'
 import MetroData from '@/data/metro.json'
 import agencyData from '@/data/agency.json'
 import ConfirmedCasesDetailsCard from '@/components/cards/ConfirmedCasesDetailsCard.vue'
@@ -123,6 +123,7 @@ export default {
     AgencyCard
   },
   data() {
+    const Data = this.$store.state.data.data
     let title, updatedAt
     switch (this.$route.params.card) {
       case 'details-of-confirmed-cases':

store/data.js

@@ -0,0 +1,37 @@
+import axios from 'axios'
+import Data from '@/data/data.json'
+
+export const state = () => ({
+  data: {
+    // contacts: {},
+    // querents: {},
+    // patients: {},
+    // patients_summary: {},
+    // discharges_summary: {},
+    // inspections: {},
+    // inspections_summary: {},
+    // main_summary: {},
+    // lastUpdate: ''
+  }
+})
+
+export const mutations = {
+  getData(state, payload) {
+    state.data = payload.data
+  }
+}
+
+export const actions = {
+  async getDataAction(context) {
+    const payload = {
+      data: Data
+    }
+    await axios.get(process.env.dataUrl).then(res => {
+      payload.data.contacts = res.data.contacts
+      payload.data.inspections = res.data.inspections
+      payload.data.inspections_summary = res.data.inspections_summary
+      payload.data.lastUpdate = res.data.lastUpdate
+    })
+    context.commit('getData', payload)
+  }
+}