[개발일지] Vue.js Trello 만들기 - 색상 입히기, 보드 세팅, 보드 삭제

색상 입히기

[mutations] 테마 색상 셋팅하기

  SET_TEHME (state, color) {

    state.bodyColor = color || '#ffffff'

    state.navbarColor = color ? 'rgba(0,0,0,.15)' : '#026aa7'

  }

[state] 상태값 설정

  bodyColor: '#ffffff',

  navbarColor: '#026aa7'

[Home.vue]

methods 추가

    ...mapMutations([

      'SET_IS_ADD_BOARD',

      'SET_TEHME' // 테마 세팅 메소드 추가

    ]),

created()

this.SET_THEME() // 추가

=> 작동확인해보면 mutations실행, 상태값만 변환됨. 그래서 외관적으로 아직 나타나지는 않음

[Navbar.vue]

Nabvar는 Home, board 둘다에 있으므로 여기서 값 세팅함

mapState 설정

  computed: {

    ...mapState({

      navbarColor: 'navbarColor',

      bodyColor: 'bodyColor'

    }),

mounted() 설정

  mounted() {

    this.updateTheme()

  },

method 설정

    updateTheme() {

      this.$el.style.backgroundColor = this.navbarColor

      const container = document.querySelector('.container')

      console.log(container)

      if (container) container.style.backgroundColor = this.bodyColor

    }

• 자신의 컴포넌트에 포함되어있지 않아도 js의 DOM 찾는 코드 사용가능
  (navbar에서 navbar밖에 있는 container class의 dom 찾음)

<board 배경 색상 지정하기>

[Board.vue]

mapMutations - 'SET_THEME' 등록

// create()

    this.fetchData().then(() => {

      this.SET_THEME(this.board.bgColor)

    })

• then() 쓰기 위해 fetchData()에서 promise 반환 해줘야 한다. fetchData의 내용을 return 한다.

=> 값은 변경되는데 DOM에 적용되지 않는다. 감시자를 설정해서 DOM에도 반영되도록 한다.

• Q. (해결)mutations을 지정했는데 이름을 수정하면 다시 수정된거로 등록이 안되는 건가? 왜 잘 변경했는데 error가 날까? 에러에 있는 mutations명으로 바꾸면 잘 동작함 => Home파일 수정 덜했음 실수ㅠ

[Navbar.vue]

bodyColor를 감시해서 UpdateTheme() 를 호출하도록 설정

  watch: {

    'bodyColor': 'updateTheme'

  },

body 부분도 backgroundColor 설정해줘서 색상이 잘 나오게 만든다.

// updateTheme()

      const body = document.querySelector('body')

      const container = document.querySelector('.container')

      if (body) body.style.backgroundColor = this.bodyColor

      if (container) container.style.backgroundColor = this.bodyColor

보드 세팅

트렐로의 사이드바 => 보드 세팅 컴포넌트로 정의함

[BoardSettings.vue] 만들고

'BoardSetting 구현' commit 내용 가져옴

---

'SET_IS_SHOW_BOARD_SETTINGS' mutations  쓸 수 있도록 변이 함수, 상태값 만든다.

[mutations.js]

  SET_IS_SHOW_BOARD_SETTINGS (state, toggle) {

    state.isShowBoardSettings = toggle

  }

[state.js]

// 추가

isShowBoardSettings: false

---

[Board.vue]

.board-title 아래에 a 태그 생성

<a class="board-header-btn show-menu" href="" @click.prevent="onShowSettings">... Show Menu</a>

<router-view> 윗쪽에 <BoardSettings> 컴포넌트 삽입

(컴포넌트 사용하기 위해 import, Coponent 등록)

---

<state값에 따라 BoardSettings 보여주기>

computied의 mapState 에 'isShowBoardSettings' 등록

<BoardSettings v-if="isShowBoardSettings" /> 로 v-if 추가

변이 함수 실행시킬 메서드 추가

    onShowSettings() {

      this.SET_IS_SHOW_BOARD_SETTINGS(true)

    }

=> 서브메뉴 보이기/안보이기 가능하게 됨

** but 메뉴 켜놓고 다른 페이지 갔다가 돌아와도 메뉴 켜져있음 -> 보드 시작 시 초기화 해주기

<보드 시작 시 보드세팅 상태값 초기화>

// created()

this.SET_IS_SHOW_BOARD_SETTINGS(false)

---

보드 삭제

<store 설정>

[api/index.js]

  // delete boards

  destroy(id) {

    return request('delete', `/boards/${id}`)

  }

[actions.js]

  // board 삭제

  DELETE_BOARD (_, {id}) {

    return api.board.destroy(id)

  },

---

<삭제 버튼 수정하기>

[BoardSetting.vue] 의 li 버튼 수정

<li><a href="" @click.prevent="onDeleteBoard">Delete Board</a></li>

<메서드 연결>

mapState 추가

  computed: {

    ...mapState({

        board: 'board'

    })

  },

mapActions 추가

    ...mapActions([

      'DELETE_BOARD'

    ]),

onDeleteBoard() 메서드 추가

    onDeleteBoard() {

      if (!window.confirm(`Delete ${this.board.title} Board?`)) return

      this.DELETE_BOARD({id: this.board.id})

        .then(() => this.SET_IS_SHOW_BOARD_SETTINGS(false)) // 열린 사이드바 false

        .then(() => this.$router.push('/'))

    }

=> 삭제 버튼 누르면 삭제 후 루트 경로로 돌아간다.

• Q. 브라우저에서 뒤로가기 누르면 삭제된 페이지가 나온다. 해결방법..?
  api에 404 에러 경우를 추가해줌

const NOTFOUND = 404

..

const onNotfound = () => router.push('/') // 404

..

else if (status === NOTFOUND) return onNotfound()

=> 콘솔에 get 404 에러, actions.js?9946:21 Uncaught (in promise) TypeError: Cannot read property 'item' of undefined

    at eval (actions.js?9946:21) 에러 뜸, 어떻게하지?