반응형 Vue.js29 [Vue] store. action 에서 다른 action 호출하기 actions 안에 methodA 에서 methodB를 호출하려고 할 때, 인자로 dispatch를 받은 후 dispatch를 이용해서 다른 메소드를 호출하면 됩니다. const actions = { methodA ({ commit, dispatch }) { dispatch('methodB') }, methodB ({ commit }) { } } 2021. 1. 12. [Vue] route 에서 url parameter 받아오기 VUE : Get URL Parameter Url 에서 파라메터를 가져오는 방법입니다. 1. $route.params https://hello-bryan.tistory.com/search/hello/20 이런 url 이 있을 때, router 설정 { path: '/search/:text/:size', components: { header: Header, default: SearchBody, footer: Footer } } 파라메터 접근은 $route.params 입니다. {{ $route.params }} {{ $route.params.text }} {{ $route.params.size }} --- 2. $route.query 파라메터가 ? 를 통해서 들어올 경우 https://hello-bryan.. 2021. 1. 4. [Vue] ESLint 사용하기 ESLint 공식 사이트에서는 이렇게 설명하고 있습니다. Find Problems ESLint statically analyzes your code to quickly find problems. ESLint is built into most text editors and you can run ESLint as part of your continuous integration pipeline. Fix Automatically Many problems ESLint finds can be automatically fixed. ESLint fixes are syntax-aware so you won't experience errors introduced by traditional find-and-replace a.. 2021. 1. 1. [Vue] store 여러개 js 파일 사용 + store --+ modules ----+ cart.js ----+ products.js --+ index.js store 폴더 안에 index.js 생성 store 폴더 아래에 modules 폴더를 생성 modules 폴더 아래에 여러개의 js 파일을 생성하고 각각 필요한 state, getters, actions, mutations 등을 생성하고 export default 합니다. export default { namespaced: true, state, getters, actions, mutations } store > index.js import Vue from 'vue' import Vuex from 'vuex' import cart from './modules/cart' import pro.. 2021. 1. 1. [Vue] Vuetify 설정 #npminstall vuetify Vuetify webpack-simple 로 프로젝트 생성 vue init webpack-simple [프로젝트명] npm install 터미널에서 npm install 을 하셔도 되고 $ cd vuetify_test $ npm install 설치 후 일단 그냥 실행해 봅니다 Vuetify 설치 $ npm install vuetify 설치 후 main.js import Vue from 'vue' import App from './App.vue' import Vuetify from 'vuetify'// 2021. 1. 1. [Vue] Cookie 사용하기 vue-cookies Cookie 는 client 단(로컬)에 저장하는 임시 저장소 같은것입니다. 쿠키 삭제등을 하게되거나 만료일이 지나면 삭제될 수 있습니다. 쿠키 외에 localStorage, sessionStorage 등이 로컬에 사용하는 저장소 입니다. 로컬에 저장할 무언가가 있을 때 사용 용도에 따라 세가지 중 하나를 선택해서 사용하셔야 합니다. 쿠키의 크기는 4096 바이트까지만 허용 하나의 도메인당 :20 개. 클라이언트에 총 300 개 까지 저장 vue-cookies 설치 npm install vue-cookies main.js // cookie import VueCookies from "vue-cookies" Vue.use(VueCookies); Vue.$cookies.config("1d.. 2021. 1. 1. [Vue] webpack-simple 빌드하기 npm run build vue 빌드하기 vue init webpack-simple [projectName] 으로 프로젝트를 만들면 package.json 에 기본적으로 scripts 명령어가 생깁니다. 개발할 때 $ npm run dev 빌드할 때 $ npm run build 빌드를 하게 되면 webpack.config.js 에 설정 되어있는 대로 /dist 경로에 build.js 가 생성됩니다. /dist 폴더와 index.html 파일을 같이 웹서버에 배포하면 되겠습니다. 예들들어 nginx 에 배포한다면 nginx.config server { listen 80; location / { root /app/build; index index.html; try_files $uri $uri/ /index.html; } } 위의 r.. 2020. 12. 30. [Vue] 삽질주의 #1 @click 사용 시 문제가 생길 수 있는 소스 코드 버튼을 클릭하면 doSearch 라는 action 을 실행하겠죠. const actions = { doSearch({ commit, state }){ console.log('doSearch'); axios.get('/api/search/').then(response => { console.log(response); commit('setResults', response.data) }).catch(error => { console.log(error) }) } } axios를 사용해서 비동기 작업을 합니다. 디버깅을 하기 위해서 아래와 같이 break point 를 찍고 기다리는데, 안걸립니다 ;; 문제는 안에 이 있어서 클릭하면 form 의 submit 이 먹힌다는 거죠. 그.. 2020. 12. 25. [Vue] 예제 #01 카운터(counter) 샘플 소스 + 설명 프로젝트를 직접 생성하지 않고 소스 부분만 보셔도 됩니다. 프로젝트 생성 커맨드 창에서 프로젝트를 생성할 위치로 이동해서 아래 명령어를 실행합니다. 그럼 명령어를 실행한 폴더 아래에 counter 폴더가 생성됩니다. $ vue init webpack-simple counter 그리고 사용하시는 개발 툴로 저 폴더를 열어봅니다. 기본적으로 package.json에 있는 것을 설치해야 하기 때문에, 툴 내 터미널에서 아래 명령어를 날립니다. $ npm install 그리고 vuex 를 사용할 것이기 때문에 터미널에서 아래 명령어로 설치해줍니다. $ npm install vuex 소스 store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) c.. 2020. 12. 24. 이전 1 2 3 다음 728x90 반응형
