수업 내용

입력 값의 양방향 바인딩과 해결법

실습 도중에 입력 값을 테이블에 삽입하는 예제가 있었다.

JS와는 달리 v-model로 바인딩한 변수가 input이 바뀔 때 마다 테이블에 실시간으로 바뀌는 것을 확인하였다.

이는 v-model의 데이터 바인딩이 양방향 바인딩이기 때문이다.
양방향 바인딩에 대한 링크

편리하긴 하지만 기존에 예상한 값과 달라 당황했다.
결국 새로운 객체에 값을 하나씩 뿌려주도록(스프레드) 하여 해결했다.

<template>
  <div>
    <div>
      <b-form-input
        v-model="user.age"
        style="width: 60%; margin-left: 20%; margin-right: 20%"
        placeholder="나이 입력"
      ></b-form-input>
      <b-form-input
        v-model="user.first_name"
        style="width: 60%; margin-left: 20%; margin-right: 20%"
        placeholder="성씨 입력"
      ></b-form-input>
      <b-form-input
        v-model="user.last_name"
        style="width: 60%; margin-left: 20%; margin-right: 20%"
        placeholder="이름 입력"
      ></b-form-input>
      <b-button @click="addUser">테이블 추가</b-button>
    </div>
    <div>
      <b-table striped hover :items="users"></b-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
      user: {
        age: null,
        first_name: null,
        last_name: null
      }
  },
  methods: {
    addUser() {
      this.users.push({ ...this.user })
      this.user.age = null
      this.user.first_name = null
      this.user.last_name = null
    }
  }
}
</script>

<style lang="scss" scoped></style>

Component 만들기

하나의 vue 파일에 다른 파일들을 같이 렌더링하고 싶을때 사용한다.

기본적으로 routing을 담당하는 index.js에서는 가장 상위의 파일(이하 부모 컴포넌트)을 라우팅해준다.

 {
    path: '/test-comp',
    component: () => import('../views/comp') 
   // views/comp/index.js를 찾음
  }

이후에 부모 컴포넌트에서 각각 원하는 하위의 파일(이하 자식 컴포넌트)을 import 해준다.

<script>
import Header from '@/views/comp/testHeader.vue'
import Footer from '@/views/comp/testFooter.vue'
import Table from '@/views/testTable.vue'

export default {
  components: {
    'app-header': Header,
    'app-footer': Footer,
    'app-table': Table
  },
  data() {
    return {
      name: ['Alice', 'Bob'] // 컴포넌트에 전달할 값
    }
  }
}
</script>

원하는 값을 받고 싶다면 props로 받을 수 있으며, 전달할 때는 속성을 붙여 전달한다.
++) data의 변수를 그대로 전달하고 싶다면 :id="value"같은 방식으로 전달한다.

<!-- 값의 전달(index.vue) -->
<template>
  <div>
    <app-header state="good이" :name="name[1]" />
    <app-table />
    <app-footer state="bad" :name="name[0]" />
  </div>
</template>

<!-- props로 값을 받음(Footer.vue) -->
<script>
export default {
  props: {
    name: {
      type: String,
      required: false,
      default: null
    },
    state: {
      type: String,
      required: false,
      default: null
    }
  }
}
</script>

Store(Vuex)

• vue 내부에서 사용하는 변수(state)를 관리하기 위해 사용한다.

• store의 구성요소는 이렇다.

  state: 관리할 상태 값들 (내부에서 mutations에 의해 관리)
  getters: 밖으로 내보낼 값들 (실제 컴포넌트에서 가져가 사용할 값들)
  mutations: 실제 state 가 변화되는곳 (내부에서 sate를 관리)
  actions: mutations 을 일으키는곳 (state 변화 x)
  <자세한 설명은 이 링크로!>

• 기본적인 모델 생성은 '@/store/models'에서 하며, 이들을 '@/store'에서 index.js로 관리한다.

// @/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import User from './models/user'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    User // 이렇게 store를 호출한다.
  }
})

// @/store/models/user.js
export default {
  state: {
    User: {
      ...
    },
    UserList: []
  },
  getters: {
    User: state => state.User,
    UserList: state => state.UserList
  },
  mutations: {
    setUser(state, data) {
      state.User = data
    },
    setUserList(state, data) {
      state.UserList = data
    }
  },
  actions: {
    actUserInfo(context, payload) {
		...
        context.commit('setUser', testUserInfo)
      }
    },
    actUserList(context, payload) {
      ...
      context.commit('setUserList', list)
    }
  }
}

• namespaced와 mapGetters, mapActions: namespaced를 사용하여 호출 시에 값들을 편리하게 불러올 수 있다.

// @/src/store/models/user.js
export default {
  namespaced: true, // 사용 시에 호출 방식이 달라진다.
  state: { ...
          
// @/views/user/UserList.vue
<script>
import { mapGetters, mapActions } from 'vuex' // namespace를 사용하면 새롭게 호출 가능
export default {
  data() {...}
.
.
.
computed: {
    ...mapGetters('User', { UserList: 'UserList' }), // state에 있는 list를 가져옴
    ...mapGetters('User', { UserInfo: 'User' }), // state에 있는 User 객체를 가져옴
    inputUserList() {
      return this.UserList
    }, // this.$store.getters.UserList와 같음
    userInfo() {
      return this.UserInfo
    }
  },
  methods: {
    ...mapActions('User', ['actUserList']),
    ...mapActions('User', ['actUserInfo']),
      // 이런 방식으로 Actions 메소드를 정의
    searchUserList() {
      this.serialId++
      this.Userparams = {
        id: this.serialId,
        name: this.inputName,
        username: this.inputUserName,
        email: this.inputEmail
      }
      this.actUserList(this.Userparams) // this.$store.actions
      this.inputName = null
      this.inputUserName = null
      this.inputEmail = null
    },
    searchUserInfo() {
      this.actUserInfo(this.inputId) // this.$store.dispatch('actUserInfo', this.inputId)
    }
  }

추가 내용

• vuetify https://vuetifyjs.com/en/

• adminLTE3

• font awesome

• vue.js API 찾아보기

• jsonformatter.org

• toast - 알람 뜨게 하는 방법

• modal - 새로운 창을 띄움