Vuex4 [TODO] todo 추가하기 // src/components/Todo/index.ts // ... export default class Todo extends Vue { // Style styleTable: object = { borderCollapse: 'collapse', padding: '10px', border: '2px solid #ddd', borderTop: '3px solid #fb7399', } styleThead: object = { color: '#fb7399', background: '#f7e6ec', textAlign: 'center', } styleTbody: object = { color: '#0094D7' } styleTh: object = { padding: '5px', } } // src/compon.. 2019. 4. 8. [TODO] google sheet API 연동 API 연동(Axios) npm install --save axioscs위 명령어로 axios 설치 // src/api/apiConfig.tsexport const config = { baseUrl: 'https://sheets.googleapis.com/v4/spreadsheets/', sheetId: '{sheetId}', sheetName: '{sheetName}', apiKey: '{apiKey}'} Colored by Color ScriptercsAPI에 사용할 정보를 따로 파일로 만들었다. {} 안에 적은 정보는 mock 데이터이다. // src/api/googleSheetApi.ts import axios, { AxiosPromise } from 'axios'import { TodoRespo.. 2019. 3. 17. [Vue.js/Typescript] 3. Vuex - State, Getter 데이터가 특정 컴포넌트에 종속되지 않고 다른 컴포넌트에서도 사용되는 데이터라면 vuex를 사용하여 공통 저장소에 저장하는게 좋다.(부모, 자식 컴포넌트간 데이터 교환이라면 props, events로 해도 되긴한다.) Vuex 사용하기 npm i --save vuexcsvuex를 사용하려면 먼저 의존성에 vuex를 추가한다. // src/store/index.ts import Vue from "vue";import Vuex from "vuex"; Vue.use(Vuex); export const store = new Vuex.Store({ state:{ // data }});Colored by Color Scriptercs그 후 src/store 폴더를 만들고 index.ts 파일을 만듭니다.그리고 위와 .. 2019. 1. 26. [Vue.js / Vuex] 전역상수 어디서나 참조할 수 있는 전역상수를 만들어보자. // src/constants.ts export default Object.freeze({ COUNTRY: "KOREA", NAME: "WITHHAM" }) cs 새로운 파일을 만들어서 위와 같이 작성한다. 위 파일에 상수들을 모아둔다. // src/index.ts import constants from "./constants"; let v = new Vue({ // 생략 template: ` {{CONSTANTS.COUNTRY}} // 추가 `, // 추가 data:{ CONSTANTS: constants } }); Colored by Color Scripter cs 루트 컴포넌트에서 data로 작성한 constants를 CONSTANTS 변수에 넣어준다.. 2018. 12. 3. 이전 1 다음
