fix: fix chunk data

Author: linooohon

src/final.json renamed to data/final.json

@@ -9,6 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.24.0",
     "core-js": "^3.6.5",
     "register-service-worker": "^1.7.1",
     "teenyicons": "^0.4.1",

package-lock.json

@@ -4,15 +4,40 @@
     <router-link to="/keyword">Keyword</router-link> |
     <router-link to="/search">Search</router-link>
   </div>
-  <router-view :jobData="totalJobData"/>
+  <router-view :chunkData="chunkJobData" :jobData="totalJobData" :loadData="loadData"/>
 </template>
 
 <script>
-import ccJob from './final.json'
+// import ccJob from './final.json'
+import axios from 'axios'
+// import { mapState, mapActions } from 'vuex'
+
 export default {
   data () {
     return {
-      totalJobData: ccJob
+      totalJobData: [], // 改用 vuex
+      keywordChunk: 0
+    }
+  },
+  mounted () {
+    this.getTotalJobData()
+  },
+  computed: {
+    chunkJobData () {
+      return this.totalJobData.slice(0, this.keywordChunk + 3)
+    }
+    // ...mapState(['dataArray'])
+  },
+  methods: {
+    // 改用 vuex
+    getTotalJobData () {
+      axios.get('https://raw.githubusercontent.com/linooohon/creative-coding-jobs-update/data/final.json').then((res) => {
+        this.totalJobData = res.data
+      })
+    },
+    // ...mapActions(['getTotalJobData']),
+    loadData () {
+      this.keywordChunk += 1
     }
   }
 }

package.json

@@ -1,11 +1,21 @@
 import { createStore } from 'vuex'
+import axios from 'axios'
 
+// not use right now
 export default createStore({
   state: {
+    dataArray: []
   },
   mutations: {
+    assignToData (state, payload) {
+      state.dataArray = payload
+    }
   },
   actions: {
+    async getTotalJobData (context) {
+      const data = await axios.get('https://raw.githubusercontent.com/linooohon/creative-coding-jobs-update/main/src/final.json')
+      context.commit('assignToData', data.data)
+    }
   },
   modules: {
   }

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="jobCard_wrapper">
-    <div v-for="(jobItem, index) in jobData" :key="index">
+    <div v-for="(jobItem, index) in chunkData" :key="index">
       <div v-for="item in Object.entries(jobItem)" :key="item[0]">
         <div class="jobCard_keyword">{{ item[0] }}</div>
         <div class="jobCard_platform">
@@ -32,6 +32,7 @@
       </div>
     </div>
   </div>
+  <button @click="loadData">More</button>
 </template>
 
 <script>
@@ -47,7 +48,7 @@ export default {
       indeed: 'Indeed'
     }
   },
-  props: ['jobData'],
+  props: ['chunkData', 'loadData'],
   components: {
     JobCard
   }