googlesheet 통신

package.json

@@ -14,8 +14,10 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "vue": "^2.5.2",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/App.vue

@@ -1,6 +1,5 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
     <router-view/>
   </div>
 </template>

src/api/apiConfig.js

@@ -0,0 +1,3 @@
+export const config = {
+  baseUrl: 'https://sheets.googleapis.com/v4/spreadsheets/'
+}

src/api/googleSheetApi.js

@@ -0,0 +1,12 @@
+import axios from 'axios'
+import { config } from './apiConfig'
+
+const googleSheetApi = axios.create({
+  baseURL: config.baseUrl
+})
+
+export function fetchTodos (sheetId, sheetName, apiKey) {
+  console.log(apiKey)
+  const params = { key: apiKey }
+  return googleSheetApi.get(`${sheetId}/values/${sheetName}`, { params })
+}

src/api/index.js

@@ -0,0 +1,5 @@
+import * as googleSpreadSheetApi from './googleSheetApi'
+
+export {
+  googleSpreadSheetApi
+}

src/components/ExerciseLog.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+<!--    <button @click = "addTodo()">추가해라</button>-->
+
+    <div>sheetId : <input v-model="sheetId" placeholder="sheetId"></div>
+    <div>sheetName : <input v-model="sheetName" placeholder="sheetName"></div>
+    <div>apiKey :  <input v-model="apiKey" placeholder="apiKey"></div>
+    <button @click= "get()">정보 가져오기</button>
+
+    <table class="table">
+      <thead>
+      <tr>
+        <th>
+        </th>
+        <th>name</th>
+        <th>todo</th>
+      </tr>
+      </thead>
+      <tbody>
+
+      <tr v-for="item in this.todos()" v-bind:key="item.key">
+        <td>
+          <input type="checkbox" :value="item.key">
+        </td>
+        <td>{{item.name}}</td>
+        <td>{{item.todo}}</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: 'ExerciseLog',
+  data () {
+    return {
+      msg: 'Exercise Log',
+      sheetId: '',
+      sheetName: '',
+      apiKey: ''
+    }
+  },
+  created () {
+  },
+  methods: {
+    get () {
+      this.getTodos({sheetId: this.sheetId, sheetName: this.sheetName, apiKey: this.apiKey})
+    },
+    addTodo () {
+      this.name = ''
+      this.todo = ''
+    },
+    ...mapState({
+      todos: state => state.googleSheet.todos
+    }),
+    ...mapActions({
+      getTodos: 'googleSheet/getTodos'
+    })
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>

src/main.js

@@ -3,12 +3,14 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import {store} from './store'
 
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
+  store,
   router,
   components: { App },
   template: '<App/>'

src/router/index.js

@@ -1,15 +1,15 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+import ExerciseLog from '@/components/ExerciseLog.vue'
 
 Vue.use(Router)
 
 export default new Router({
   routes: [
     {
       path: '/',
-      name: 'HelloWorld',
-      component: HelloWorld
+      name: 'ExerciseLog',
+      component: ExerciseLog
     }
   ]
 })

src/store/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import * as googleSheet from './modules/googleSheet'
+
+Vue.use(Vuex)
+
+export const store = new Vuex.Store({
+  state: {
+  },
+  modules: {
+    googleSheet: googleSheet
+  },
+  getters: {
+  }
+})

src/store/modules/googleSheet.js

@@ -0,0 +1,39 @@
+import { googleSpreadSheetApi } from '../../api'
+
+export const namespaced = true
+
+export class TodoItem {
+  name = ''
+  todo = ''
+
+  constructor (name, todo) {
+    this.name = name
+    this.todo = todo
+  }
+}
+
+export const state = {
+  todos: []
+}
+
+export const getters = {}
+
+export const mutations = {
+  SET_TODO (state, todos) {
+    state.todos = []
+    todos.forEach((todo, index) => {
+      if (index === 0) return
+      state.todos.push(new TodoItem(todo[0], todo[1]))
+    })
+    console.log(state.todos)
+  }
+}
+
+export const actions = {
+  getTodos ({ commit }, {sheetId, sheetName, apiKey}) {
+    googleSpreadSheetApi.fetchTodos(sheetId, sheetName, apiKey)
+      .then(response => {
+        commit('SET_TODO', response.data.values)
+      })
+  }
+}

test/unit/specs/HelloWorld.spec.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import HelloWorld from '@/components/HelloWorld'
 
-describe('HelloWorld.vue', () => {
+describe('ExerciseLog.vue', () => {
   it('should render correct contents', () => {
     const Constructor = Vue.extend(HelloWorld)
     const vm = new Constructor().$mount()