BookStore 프로필 업로드 새로고침 현상 수정

내용

기존의 프로필 수정시 서버에서 프로필을 저장하고 저장한 위치를 vue의 store에서 저장하는 과정중

새로고침 현상이 일어나서 변경된 사진으로 갱신을 못하는 현상 수정

 

원인

받은 url을 store의 action에서 require로 가공후 저장하는 과정에서 새로고침 발생 

 

해결

action에서 파일 위치만 저장 후 

mutations: {
		...
        isLoading : function(state, data){
            state.loadingData = data;
            console.log("hi")
        },
        
        putProfile: function (state, data){
            state.userData.nickName = data.nickName
            state.userData.profilePicture = data.profilePicture
            console.log(state.userData.profilePicture)
        },
        ...
}

actions: {
	...
    updateProfile: function ({commit}, payload) {
        commit('isLoading', true);
        let data = {};
        data.nickName = payload.nickName;
        data.profilePicture = payload.profilePicture;

        return new Promise((resolve) => {
            setTimeout(() => {
                commit('putProfile', data);
                resolve()
            }, 600)
        }).then(()=> commit('isLoading', false))
    },
    ...
 }

 

각 이미지를 보여주는 컴포넌트 최상단에서 require을 수행한다.

그리고 action의 동작순서를 확인하기 위하여 이미지의 isLoading을 false로 지정하고 

이미지 변경작업이 끝나면 다시 isLoading을 true로 변경한다

각각의 컴포넌트에서 watch로 isLoading을 확인하여 이미지가 변경중일때 (isLoading==false)

잠시 이미지를 숨기고 true로 돌아오면 이미지를 다시 불러온다

 

<v-avatar
    color="grey"
    size="110">
  <img :src="require('@/../../../profile_img/'+profileImg)"
       style="object-fit: cover"
       v-if="!isLoading"
       alt=""/>
</v-avatar>
...
...
...

computed:{
  isLoading(){
    return this.$store.state.member.loadingData;
  },
},

 

위 action - mutations 코드에서 볼수있듯이 isLoading을 변경할때 콘솔창에 "hi" 출력

이제 프로필 사진을 계속 변경해도 새로고침이 발생하지않는다