Hojin

About

기본 형식

const Counter = {
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
}

createApp(Counter).mount('#app')

• Vuex 는 react의 redux와 같은 기능이다.
• 주의할 점은 상태를 새로고침 시 상태가 초기화 된다는 점이다. 
• 대안으로는 'vuex-persistedstate' 나 ( state - localstorage 동기화 라이브러리) 같은 또 다른 라이브러리가 필요하다.

Mutation

- Vuex 스토어에서 실제로 상태를 변경하는 유일한 방법은 돌연변이를 커밋하는 것입니다.

const store = createStore({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // mutate state
      state.count++
    }
  }
})

- store.commit Mutation 핸들러를 호출하려면 해당 유형으로 호출해야 합니다 .

store.commit('increment')

Getter

const store = createStore({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos (state) {
      return state.todos.filter(todo => todo.done)
    }
  }
})

- Helper 'mapGetters'는 저장소 getter를 로컬 계산 속성에 매핑합니다.

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    // mix the getters into computed with object spread operator
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

Action

- Action은 Mutation와 일치하며 차이점은 다음과 같습니다.

• 상태를 변경하는 대신 action을 변경합니다.

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

store.dispatch('increment')

참고

https://vuex.vuejs.org/

Vue 사용 이유

- 쉬운 학습 곡선: Vue는 다른 프레임워크보다 더 쉽게 학습할 수 있습니다. 간단한 문법과 직관적인 구조를 가지고 있으며, HTML, CSS 및 JavaScript를 이미 알고 있다면 비교적 빠르게 시작할 수 있습니다.

개발 환경

- Vue 사용할 때, 유용한 VS Code extensions를 다운 받아줍니다.

: Vetur, HTML CSS Support, Vue 3 Snippets

- Vue프로젝트를 쉽게 생성 해주는 라이브러리를 설치해줍니다.

npm install -g @vue/cli

- 위 코드가 오류가 뜨면, yarn으로 설치해줍니다.

yarn global add @vue/cli  

vue create [폴더명]

yarn serve  // 실행

기본 형식 살펴보기

- 프로젝트 생성 후 App.vue 파일입니다.

// App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

- 함수와 변수는 export default 오브젝트 내부에 작성해줍니다.

- 변수는 data() { return { 변수명: 값  }  }  

- 함수는 methods: {  함수명(인자) {} } 

이런식으로 작성해줍니다.

  data() {
    return {
      menus: ["Home", "Shop", "About"],
      my_style: "color: red",
    };
  },
  methods: {
    report(idx) {
      this.report_nums[idx] += 1;
    },
    click_modal() {
      this.isModalOpen = !this.isModalOpen;
    },
  },
  components: {},

- 위에 함수안에 this. 를 사용해준 이유는 함수 내의 변수가 아니라

export default { } 내부에 있는 변수임을 나타내줍니다. 

태그 내의 v-if , v-for

- Vue만의 특징이라 할 수 있는 v- 시리즈 입니다.

- v-for 은 "[값] in [몇 번 반복]"  "([값], [키]) in [배열]"   형식으로 사용되고,

- 보통 후자로 많이 쓰입니다. 

- 태그 내의 값을 사용하기 위해선 {{  }} 안에  변수를 넣어 사용해줍니다.

 <a v-for="(menu, key) in menus" :key="key">{{ menu }}</a>

- 태그 속성 내의 값을 사용하기 위해서 속성앞에  :  을 붙여줍니다.

<img :src="value.image"/>

- 태그 내에 v-if 를 사용하면 조건식이 true이면 v-if를 포함한

내부 태그들이 모두 실행됩니다.

 <div class="bg-black" v-if="isModalOpen === true">
 	<div>실행!
    </div>
 
 </div>

button @click

 <button v-on:click="report(key)">  
 
 <button @click="report(key)">  // 축약형

- button 내의 click 속성으로 change 등 다양한 속성을 제공합니다.

- button을 클릭시 report 함수가 실행됩니다.

- 간단한 사이트 제작하였다.

https://github.com/HojinLim/Vue_codingApple

참고

https://www.youtube.com/watch?v=-tVaahsXpwk&list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ-&ab_channel=%EC%BD%94%EB%94%A9%EC%95%A0%ED%94%8C