Manta Vue - newlife-js/Wiki GitHub Wiki

1) Vuex

state, getters, mutations 등등에서 마지막 변수 or 함수 뒤에도 꼭 ,를 붙여줘야 끝까지 인식함...

모듈화

@module
namespaced: true 설정해줘야 함

const commonStore = {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}
export default commonStore;

@vue

computed: {
   ..mapGetters('모듈명', {
    user : 'getUser',
   })
  },

@js

router.afterEach(() => {
  store.commit('모듈명/END_LOADING', null, {root:true});
})

rootState

store의 action에서 다른 state를 접근하려면 rootState를 사용해야 함
(action에서만 됨...)

FETCH_FEED_TOURS({ commit, rootState }, limitCount=this.state.tourInitialCount) {
      const buddyList = rootState.user.buddyList;
      const myUid = rootState.user.user.uid;
      return fetchTours(buddyList.concat(myUid), limitCount, false).then((tours) => commit('SET_FEED_TOURS', tours));
},

---

2) Javascript 문법

Array

array concat

newArray = arra1.concat(array2);
newArray = arra1.concat(array2.filter((item) => array1.indexOf(item) === -1 && item !== '')); // 중복 제거

array 중복제거

newArray = Array.from(new Set(array))

array 판별

Array.isArray(array1)

---

array 동기 병렬 처리

동기 동작을 forEach 안에서 할 경우에는 동기처리가 되지 않음.
Promise.all 문법 사용해야 함

const fetchLogs = async (uidList, limitCount) => {
  let docs = [];
  const selectQuery = query(collection(db, `log`), where("uid", "in", uidList || []), orderBy("mAt", "desc"), limit(limitCount));
  const querySnapshot = await getDocs(selectQuery);
  const promises = querySnapshot.docs.map(doc => convertLogbookDocument(doc, 'log'));
  docs = await Promise.all(promises);
  return docs;
}

const convertLogbookDocument = async (doc, collection) => {
  const logbook = decodeObjectKeys(doc.data());
  const imageList = await getImageList(`${collection}/${logbook.uid}/${doc.id}`);
  return {id: doc.id, imageURLs: imageList, ...logbook};
}

참고

3) 기타

* window.addEventListener에서 callback 함수를 화살표함수로 쓰지 않으면 this.~ 가 안 먹힘

window.addEventListener('keyup', (event) =>{
  if (this.getModalName && (event.key === "Escape" || event.key === "Enter")) {
    this.hideModal();
  }
})

전역 변수 사용

.env 파일에 VUE_APP_으로 시작하는 환경변수를 등록할 수 있다고 하지만 실패... 웹팩때문인 것 같음..
main.js prototype에 등록함..

Vue.prototype.$useGmap = true;
// 사용은 this.$useGmap

Routing with data props

route-link 이동 시에 데이터를 가져가기 위해서는 query라는 키워드 사용
@router-link

<router-link :to="{path: `/logbookDetail/${logbook.lid}`, query: {logbook, buddy}}">{{ logbook.divingPoint }} </router-link>

props에 넘길 데이터를 지정할 수 있음
function mode를 쓰지 않고 true만 넣으면 params가 들어감
@router/index.js

{
      path: "/logbookDetail/:lid",
      name: "logbookDetail",
      component: () => import('@/views/Logbook/LogbookDetail.vue'),
      meta: { auth: true, logbook: true },
      props: route => ({ ...route.query }),
    },

nested router & named router

두 개 이상의 router-view 쓰는 방법
참고

watch는 배열 내부의 변화는 감지하지 못한다.

deep 옵션을 사용해야 하는데, 3.x버전부터 지원하는가보다..
참고

input file에서 같은 file을 반복해서 넣을 때 @change event trigger되지 않음.

input value를 reset해줘야 함

this.$refs.images.value = null;