Vuex 기초배우기 #1

유튜브 강의 중 Vuex에 관해 괜찮은 것이 있길래 정리해보았다.

 

사용자 정보를 입력하고 전체 사용자에 관한 목록을 출력하는 단순한 코드이다.

 

/src/App.vue

<template>
  <v-app id="inspire">
    <v-navigation-drawer v-model="drawer" fixed app> //네비게이션바
      <v-list dense>
        <v-list-tile router :to="{ name: 'home' }" exact>
          <v-list-tile-action>
            <v-icon>home</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Home</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile router :to="{ name: 'users' }" exact>
          <v-list-tile-action>
            <v-icon>person</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Users</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar color="indigo" dark fixed app>
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-toolbar>
    <v-content>
      <router-view /> //라우팅할 페이지
    </v-content>
    <v-footer color="indigo" app> //푸터
      <span class="white--text">&copy; 2021</span>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    drawer: null,
  }),
  props: {
    source: String,
  },
};
</script>

 

/router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import(/* webpackChunkName: "about" */ './views/Home.vue')
    },
    {
      path: '/users',
      name: 'users',
      component: () => import(/* webpackChunkName: "users" */ './views/Users.vue')
    }
  ]
})

 

/src/views/User.vue

(Home.vue에는 별 내용이 없으니 생략하겠다.)

<template>
  <v-container grid-list-xl>
    <v-layout row wrap>
      <v-flex xs6>
        <AllUsers></AllUsers>
      </v-flex>
      <v-flex xs6>
        <SignUp></SignUp>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
  import AllUsers from '@/components/Users/AllUsers'
  import SignUp from '@/components/Users/SignUp'

  export default {
    components: {
      AllUsers,
      SignUp
    },
  }

</script>

 

/src/components/Users/AllUsers.vue

<template>
  <div>
    <h1>All Users</h1>
    <v-list two-line>
      <v-list-tile 
        v-for="(user, index) in allUsers"
        :key="index"
        avatar
      >
        <v-list-tile-avatar color="grey lighten-3">
          <img :src="user.src">
        </v-list-tile-avatar>

        <v-list-tile-content>
          <v-list-tile-title v-html="user.name"></v-list-tile-title>
          <v-list-tile-sub-title>id:#{{index}} / {{user.address}} 거주</v-list-tile-sub-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list>

  </div>
</template>

<script>
import { EventBus } from '@/main.js'

  export default {
    data() {
      return {
        allUsers:[
          {userId: 'hoza123', password: '123', name: 'Hoza', address: 'Seoul', src:'https://goo.gl/oqLfJR'},
          {userId: 'max123', password: '456', name: 'Max', address: 'Berlin', src:'https://goo.gl/Ksk9B9'},
          {userId: 'lego123', password: '789', name: 'Lego', address: 'Busan', src:'https://goo.gl/x7SpCD'}
        ]
      }
    },
    mounted() {
      EventBus.$on('signUp', users => {
        this.allUsers.push(users)
      })
    }
  }
</script>

 

allUsers 배열에 사용자들의 정보를 입력하고 v-for을 통하여 전체 사용자의 내용을 출력한다.
SignUp.vue에서 사용자 정보를 입력하면 그 또한 배열에 담아 내용을 출력해야 하니
EventBus를 통하여 정보를 받아와 push 하여 준다

 

src/components/Users/SignUp.vue

<template>
  <div>
    <h1>SignUp</h1>
    <v-text-field
      label="아이디"
      v-model="userId"
    ></v-text-field>
    <v-text-field
      label="비밀번호"
      type="password"
      v-model="password"
    ></v-text-field>
    <v-text-field
      label="이름"
      v-model="name"
    ></v-text-field>
    <v-text-field
      label="주소"
      v-model="address"
    ></v-text-field>
    <v-text-field
      label="이미지"
      v-model="src"
    ></v-text-field>
    <v-btn @click="signUp">회원가입</v-btn>
  </div>
</template>

<script>
import { EventBus } from '@/main.js'

  export default {
    data() {
      return {
        userId: null,
        password: null,
        name: null,
        address: null,
        src: null
      }
    },
    methods: {
      signUp() {
        let userObj = {
          userId: this.userId,
          password: this.password,
          name: this.name,
          address: this.address,
          src: this.src
        }
        EventBus.$emit('signUp', userObj)
        this.clearForm()
      },
      clearForm() {
        this.userId = null,
        this.password = null,
        this.name = null,
        this.address = null,
        this.src = null
      }
    }
  }
</script>

아이디, 비밀번호 등 각종 정보들을 v-model을 통해 받아오고
입력받은 내용들을 하나의 객체로 만들어 준다
이는 AllUsers의 회원정보에 나와야 하니 EventBus를 통하여 객체를 넘겨준다

 

src/main.js

export const EventBus = new Vue()

EventBus를 사용하고 있으니 main.js에서 선언하여준다.

 

앞으로 이 예제를 통하여 Vuex 사용하는 법과 Axios와 통신하는 법 등으로 확장시킬 것이다

 

google에서 avatar를 받아오면 get 403 오류가 발생하는데 무슨 권한에 관한 오류인지 모르겠다