[주유소] 12. 로그인 정보 store에 저장 + Heatmap 로직 이해 + 이미지 바인딩 에러 해결

냐항·2022년 1월 24일

WebRTC project

목록 보기

13/37

오늘의 목표

1. 로그인 정보 vuex를 사용해서 store에 넘기기
2. Heatmap 로직 이해 + 데이터 연결 방법 찾기
3. 마이페이지 정보 분기

1. 로그인 정보 store에 할당하기

1-1. login.vue

로그인 함수 실행 후 store의 accounts 모듈의 logIn 함수 호출
post요청에 성공하면 actions 함수 실행하기!!

methods: {
  로그인 함수 실행 후 store의 accounts 모듈의 logIn 함수 호출
    ...mapActions(accounts, ['logIn']),
      
    login: function () {
      axios({
        method: 'post',
        url: `${process.env.VUE_APP_API_URL}/user/login`,
        data: this.credentials
      })
        .then(res => {
          localStorage.setItem('jwt', res.data.accessToken)
        
        
        post요청에 성공하면 actions 함수 실행하기!! 
          this.logIn(res.data.user)
          this.$router.push({name:'Main'})
        })
        .catch(err => {
          ...
        })
    }
  }
}

1-2. store/modules/accounts.js

store/index.js에 많은 정보가 담길 것이기 때문에 계정 정보는 accounts 모듈에 담아줬다.
호출할 때는 위와 같이 ...mapActions(accounts, ['logIn']) 이렇게!

const accounts = {
    namespaced: true,
    state: {
        user: null,
        isLogin: false
    },
    mutations: {
        LOGIN: (state, userInfo) => {
            state.user = userInfo
            state.isLogin = true
        }
    },
    actions: {
        logIn: ({ commit }, userInfo) => {
            commit('LOGIN', userInfo)
        }
    }
}

export default accounts

여러개의 index.js 파일을 모듈화할 수 있다는 것을 배웠다!
팀원 언니가 요렇게 사용할 수 있다는 것을 알려줘서
검색해보고 적용해보았다 🎨

2. Heatmap 날짜 연동 가능 그래프 libraray 발견!!!!!

내가 못하겠다고 찡찡거렸던 그 Heatmap이다 ㅋㅋㅋ

2-1. apexcharts

처음에는 해당 library를 찾아 적용했다.
해당 차트는 날짜 데이터와 연동할 수 없다.
다시 찾는다.

2-2. vue-calendar-heatmap library를 찾았다!

헐!!!!!!!!!!!!!
github처럼 날짜 데이터랑 연동이 된다!!!!!!!!!!!!
감동받았다
역쉬 포기 직전까지 버텨야 뭔가가 나온다

<div class="outer-box my-3">
          <div class="p-2">
             <div id="app">
                <calendar-heatmap
                ### 커밋 쳌이 될 데이터를 values에 담아줌!!!!
                #### 감동 100배 ✨
                  :values="[{ date: '2021-9-27', count: 6 },
                  { date: '2021-9-21', count: 6 }]"
                  :start-date="2021-1-22"
                  end-date="2022-1-22"
                  :range-color="[
                    '#ebedf0',
                    '#dae2ef',
                    '#c0ddf9',
                    '#73b3f3',
                    '#3886e1',
                    '#17459e',
                  ]"
                  tooltip-unit="소주~"
                />
              </div>
          </div>
        </div>

3. 마이페이지 데이터 연동

데이터 연동 자체는 어렵지 않았으나 imgUrl을 가져오느라 꽤 오래걸렸다.
axios 안에서 이미지 경로를 할당해줄 수 없다! Vue는 비동기적이라! 요 부분을 놓치고 진짜 요기조기 되는 곳에서 모두 imgUrl 할당을 시도했다.
정답은! computed로 따로 빼주는 것!

created: function (){
    axios({
      method: 'get',
      url: `${process.env.VUE_APP_API_URL}/user/info`,
      headers: this.setToken()
    })
      .then(res => {
        const userInfo = res.data.user
        this.user = userInfo
      
      // if (userInfo.img) {
        //   console.log('yess')
        //   this.img = userInfo.imgUrl
        // } else {
        //   console.log('noo')
        //   this.img = '@/assets/chat.png'
        // }


      })
      .catch(err => {
        console.log(err)
      })
  },
  computed: {
    imgUrl: function () {
      if (this.user.img) {
        return this.user.imgUrl
      } else {
        return require('@/assets/chat.png')
      }

    }
  }

4. ( 목표완수 후) 프로필 수정 페이지 작성

여태껏 모달창을 사용하지 않고 router로 모든 링크를 넘겨줬다.
머릿 속으로는 v-if와 v-bind를 써서 휙휙 on/off처럼 하면 되겠지~라고 생각했다.
역쉬나 호락호락하지 않게 모달창이 뜨지를 않네 🤯
ㅇㅋ v-if 버리고 v-dialog 간다!!!
음,,, v-dialog를 상위 컴포넌트에 어떻게 불러오지??
구글링
해결 완료!!!!!