dev_0hoon

https://quasar.dev/start/quasar-cli Quasar UMD - CDN install | Quasar FrameworkHow to use the Unified Module Definition form of Quasar.quasar.dev cli 설치해서 진행 할거임$ npm i -g @quasar/cli$ npm init quasarnpm으로 프로젝트 생성 설치할 거임. 설치말고 걍 npm으로 라이브러리만 설치할 수도 있는데 그러면 기능이 한정적임 공식문서 보면됌 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@quasar'npm ERR! [Error: EACCES: permission ..

기존 store.jsimport { createStore } from "vuex";const storage = { item(){ const arr = []; if(localStorage.length > 0){ for(var i = 0; i   이제 모듈화를 할 차례이다. 나는 각각 store의 vuex 함수 단위로 모듈화 했다.mutations.jsconst addOneItem = (state,todoItem) => { var obj = {completed : false , item : todoItem}; localStorage.setItem(todoItem,JSON.stringify(obj)); state.todoItems.pu..

게터스를 썻을 때 어느 부분에서 코딩을 편하게 할 수 있는지 볼수 있다. 게터스는 state 값을 가져오거나, 가공한 값을 불러올 때 찾는다. storeimport { createStore } from "vuex";export const store = createStore({ state : { price : 100 }, getters : { originalPrice(state){ return state.price; }, doublePrice(state){ return state.price * 2; }, triplePrice(state){ return sta..

mapMutations 사용store.jsexport const store = createStore({ state: { todoItems : storage.item() }, getters: { storedTodoItems(state){ return state.todoItems } }, mutations : { addOneItem(state,todoItem){ var obj = {completed : false , item : todoItem}; localStorage.setItem(todoItem,JSON.stringify(obj)); state.to..

Store에 있는 아래 4가지 속성들을 간편하게 코딩하는 방법- state -> mapState- getters -> mapGetters- mutations -> mapMutations- actions -> mapActions   store.jsexport const store = createStore({ state: { todoItems : storage.item() }, getters: { storedTodoItems(state){ return state.todoItems } }, list.vue {{ todoItem.item }}this.$store.getters.storedTodoItems 로도 접근이 ..

actions란 Vuex store에서 사용하는 비동기 처리 로직이다. 만약 서버에 요청을 보낸 뒤 자바스크립트는 기다려 주지 않는다. 통신이 좀 늦어지면 제대로 된 데이터 표시가 되지 않고 지나갈 수 있다는 것임..  비동기 로직은 이런 문제를 해결하기 위한 메서드이며, actions에서 비동기 처리 로직을 선언 할 수 있다.그리고 그 비동기 로직을 담당하는 것이 mutations이다.

실제 개발할 때에도 state 값 변경되면 어디서 변경되는지 store만 열어서 찾아볼 수 있기 때문이다.

아 아래부분에 변경하는 부분이 있구나.. 이렇게 접근해서 변경하는구나.. this.$store.commit(함수명,인자)를 넘겨서 사용할 수 있구만..  인자를 여러개 보내고 싶으면 저렇게 보내면 된다.payload라는 매개변수로 정의했는데 아마도 법칙이 아닐까 싶다.아 관행적으로 하는 것이 맞다고 강의에서 말한다. 바꿔도 되지만 통상적으로 사용하는 매개변수 명임..  실제로 이렇게 store.js에 작성했다.export const store = createStore({ state: { todoItems : storage.item() }, mutations : { addOneItem(state,todoItem){ var obj = {comple..