mylog 수정

Vue로 PWA 개발 - 그랜파 개발자

Vue 프로젝트 Beta Test : mylog, 일상의 기록

개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.

 

내가 작성한 마이로그는 수정할 수 있습니다. 상세 보기 페이지에서 수정을 위하여 수정 페이지로 이동할 때 props를 이용하여 수정할 마이로그를 전달합니다.

마이로그 수정

1. 마이로그 수정을 위하여 상세 보기 페이지에서 수정 버튼을 누르면 수정 페이지로 이동합니다.
2. 수정 페이지로 이동할 수 있도록 Vue Router에서 라우팅 설정을 추가합니다. Vue Router에서는 props 옵션을 통해 mylogId와 mylog를 라우트 파라미터로 수정 컴포넌트로 전달할 수 있습니다.
3. 수정 페이지에서는 props로 mylogId와 mylog를 받아 화면에 출력하고 수정할 수 있습니다.

 

1. 라우터 설정

src/router/index.js

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store';

. . .

Vue.use(VueRouter)

const routes = [
 . . .
  {
    path: '/mylog/edit',
    name: 'edit',
    component: EditMyLogView,
    props: true,
  },  
  . . .
]
. . .
export default router

 

2. 수정 페이지로 이동

src/views/MyLogView.vue

<!-- src/views/MyLogView.vue -->
<template>
  <v-container>
    <v-card v-if="mylog">
      . . .
      <v-card-actions >
        <v-spacer></v-spacer>
        . . .        
        <!-- 게시물 수정 버튼 -->
        <v-btn small text v-if="isAuthor" @click="goToEditMylog()">
          수정 &nbsp; <v-icon>mdi-pencil</v-icon>
        </v-btn>
      </v-card-actions> 
      . . .
    </v-card>
   . . .
  </v-container>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import sanitizeHtml from 'sanitize-html';

export default {
  . . .
  methods: {  
    . . .
    // 마이로그 수정
    goToEditMylog() {
      this.$router.push({ name: 'edit', params: { mylogId: this.$route.params.id, mylog: this.mylog } });
    },
    . . .
};
</script> 

 

3. 수정 페이지

src/views/EditMyLogView.vue

<!-- src/views/EditMyLogView.vue -->
<template>
  <v-container>
    . . .
  </v-container>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  props: {
    mylogId: {
      type: String,
      required: true,
    },
    mylog: {
      type: Object,
      required: true,
    },
  },
  . . .
  methods: {    
    ...mapActions('mylogs', ['updateMylog']),
    async submitMylog() {
      if (this.$refs.form.validate()) {
        // Vuex 액션 호출하여 게시물 수정 
        await this.updateMylog({mylogId: this.mylogId, updatedData: this.editedMylog});        
        this.$router.push({ name: "mylog", params: { id: this.mylogId } });
      }
    },
  },
};
</script>

 

4. updateMylog

src/store/modules/mylogs.js

// src/store/modules/mylogs.js
import { v4 as uuidv4 } from 'uuid';
import { db, doc, collection, getDoc, getDocs, setDoc, addDoc,updateDoc, deleteDoc, arrayUnion, increment, where } from "@/firebase";
import { query, orderBy } from "@/firebase";

const state = {
  . . .
  mylogs: [],
  . . .
};

const mutations = {
  . . .
  setMylogs(state, mylogs) {
    state.mylogs = mylogs;
  },
  . . .
};

const actions = {
  // 전체 마이로그를 작성일 역순으로 로드한다.
  async fetchMylogs({ commit }) {
    commit('setLoading', true);
    try {
      const mylogs = []; 
      const mylogsRef = query(collection(db, "mylogs"), orderBy("createdAt", "desc"));
      const querySnapshot = await getDocs(mylogsRef);
      querySnapshot.forEach((doc) => {
        // doc.data() is never undefined for query doc snapshots
        mylogs.push({ id: doc.id, ...doc.data() });
      });

      // state에 저장한다.
      commit('setMylogs', mylogs);

    } catch (error) {
      console.log("error: ", error);
      commit('setError', error);
    } finally {
      commit('setLoading', false);
    }
  },   
  . . .
  // 게시물 수정 액션
  async updateMylog({ commit, dispatch }, { mylogId, updatedData }) {
    
    try {
      commit('setLoading', true);
      const mylogRef = doc(db, "mylogs", mylogId);
      await updateDoc(mylogRef, {
        title: updatedData.title,
        content: updatedData.content,
        updatedAt: new Date(), // 수정한 시간 기록
      });
      commit('setLoading', false);
      alert("마이로그를 수정하였습니다."); 

      // 마이로그 수정 후 전체 다시 로드 한다.
      dispatch('fetchMylogs');           
    } catch (error) {
      alert("마이로그 수정 실패 : " + error.message);
    }    
  },
  . . .
};

. . .

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

Vue PWA 프로젝트, mylog 코드