Vue todolist 만들기 - 5. Post 수정기능

Post를 수정하는 기능을 구현하겠습니다.
 
1. components/EachofPost.vue 수정
v-if 기능을 이용하여 edit모드인지 아닌지에 따라 다른 화면을 보여주도록 구성합니다.

<template> 
  <div class="post" v-if="edit">
    <div class="post_header">
      <input class="title" type="text" name="title" v-model="title_update" />
      <button class="edit" type="submit" value="Add" @click="updateItem" >v</button>    
    </div>
    <div class="post_body">
      <textarea name="body" v-model="body_update" />   
    </div>    
  </div>   
  <div class="post" v-else>
    <div class="post_header">
      <div class="title">
        {{ id }}
        {{ titleOfPost }}                      
      </div>  
      <button class="edit" @click="editItem">v</button> 
      <button class="close" @click="removeItem">x</button>  
    </div>    
    <div class="post_body">
      {{ bodyOfPost }}
      <div class="creator">
        by {{  creator }}        
      </div>
    </div>  
    
  </div> 
</template>

<script>
export default {
  props:['id','titleOfPost', 'bodyOfPost','creator'],  
  data(){
    return{
      edit: false,
      title_update:this.titleOfPost,
      body_update:this.bodyOfPost,
    }
  } , 
  methods:{
    removeItem(){
      this.$store.dispatch("deletePost", this.id)
    },
    editItem(){
      this.edit = !this.edit;
    },
    updateItem(){
      this.$store.dispatch("updatePost", {
        _id:this.id, 
        title: this.title_update, 
        body: this.body_update
      })
      this.editItem();
    }
  }
}

</script>

<style>

.post{
  /* background-color:blanchedalmond; */
  margin: 5px auto;
  border: 1px solid grey;
  border-radius: 10px;  
  width:100%;
  min-height:100px;
}
.post .post_header{  
  display: flex;
  padding: 5px;
}
.post .post_header .title{
  display:inline-block;
  text-align: left;
  font-size: 24px;  
  height: 50px;
  width:100%;
  color: black;
  border: 0px solid;
  /* background-color:blueviolet; */
}
.post .post_header .close{
  position: relative;  
  font-size:20px;  
  width:20px;
  height:20px;  
  color:dimgrey;
  background-color: transparent;
  border-color: transparent;
}
.post .post_header .edit{
  position: relative;  
  box-sizing: border-box;
  font-size:20px;  
  width:20px;
  height:20px;  
  color:dimgrey;
  background-color: transparent;
  border-color: transparent;
}

.post .post_body{
  font-size: 16px;
  color:cadetblue;
  text-align: left;
  padding: 5px;
  border: 0px solid;
  /* background-color: orange; */
  width: 100%;
  min-height: 25px;
}
.post .post_body .creator{
  text-align: right;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-right: 10px;
  margin-bottom: 5px;
  /* right: 10px; */
}
.post .post_body textarea{
  width: 95%;
  min-height:24px;
  border: 0px;
  font-size: 16px;
  color:cadetblue;
}
</style>

 

 

2. store/store.js

import { createStore } from 'vuex';
import axios from 'axios';


axios.defaults.baseURL = 'http://localhost:3000';
axios.defaults.headers.post['Content-Type']='application/json;charset=utf-8';
axios.defaults.headers.post['Access-Control-Allow-Origin']='*';


export const store = createStore({
// export default createStore({
  state:{
    user:{
      // {username: '홍길동', email: 'abcd@abcd.com', password: '1234'}
    },
    posts: [
      // {_id: '1', title: 'apple', body: 'Im apple'},
      // {_id: '2', title: 'apple', body: 'Im apple'},
      // {_id: '3', title: 'apple', body: 'Im apple'}
    ]
  },
  mutations:{    
    updateState(state, payload) {
      // ['movies','message','loading'], 액션에서 넘어온 값(payload)를 기존 state에 할당해준다.
      // read, create
      Object.keys(payload).forEach((key) => {
        state[key] = payload[key];        
      });
    },
    DELETEPOST(state, post_id){            
      const delete_index = state.posts.findIndex(p=> p._id === post_id);      // 삭제할 포스트의 index 찾기
      state.posts.splice(delete_index,1);      
    },
    UPDATEPOST(state,updatePost){      
      const update_store_item = state.posts.find(p => p._id === updatePost._id);      
      // console.log(updatePost)
      update_store_item.title = updatePost.title;
      update_store_item.body = updatePost.body;
    }
  },
  actions:{   
    addPost(context, newPost){      
      const id= context.state.posts.length+1;      
      const post={
        _id: id,
        title: newPost.title,
        body: newPost.body,
        creator: newPost.title
      }
      context.commit("updateState", {
        posts: [...context.state.posts, post],
      })   
      // console.log(context.state.user)        
    },
    deletePost(context, post_id){
      context.commit("DELETEPOST", post_id);
    },
    updatePost(context, updatePost){
      context.commit("UPDATEPOST", updatePost)
    }
  }
});