[Vue실강] 5강 Vuex

youngseo·2022년 5월 26일

1. plugins(플러그인)사용하기

▶vue공식문서

플러그인은 일반적으로 Vue에 전역 수준의 기능을 추가하는 self-contained 코드입니다. 객체 또는함수를 install()메소드를 통해 제공합니다.

플러그인은 $를 붙여서 생성합니다.

// plugins/i18n.js
export default {
  install: (app, options) => {
    // 플러그인 코드는 여기에
  }
}

실습을 통해 플러그인에 대해 조금 더 자세히 알아보도록 하겠습니다.

먼저, src디렉토리 안에 plugins라는 폴더를 만들어줍니다.

1-1. src> plugins> heropy.js

export default {
  install(app) { //🐥(1)
    //app은 현재 vue프로젝트를 의미합니다.
    
   //전역속성에 등록 //🐥(2)
   app.config.globalProperties.$heropy =( msg = 'Heropy') => {
      return `Hello ${msg}!!`
    }
  }
}

🐥(1)App이란?

install을 할 때첫번 째 매개변수로 vue.js가 어떤 객체 데이터를 넣어주게 됩니다. 예제에서는 명시적으로 App으로 받도록 하겠습니다.

App을 통해 들어오는 데이터는 main.js에서 createApp을 통해 반환되는 현재 우리의 Vue프로젝트를 의미합니다. 즉 우리의 현재 vue프로젝트를 plugin에 연결을 해주는 것입니다.

🐥(2) App에서 쓸 수 있는 명령: globalProperties

vue.js공식문서-애플리케이션 설정 중 전역속성들 (globalProperties)을 참고해 공부를 하는 것을 권장드립니다.

아래와 같이 config.globalProperties를 통해 내 프로젝트에서 글로벌하게 쓸 속성을 등록 할 수 있습니다.

export default {
  install(app) {
    app.config.globalProperties.$heropy <= 123456
  }
}

플러그인을 연결한 후 우리 프로젝트에 정상적으로 등록되었는지 App.vue에서 created를 통해 한번 확인해볼 수 있습니다.

<template>
  App.vue
</template>

<script>
export default {
  created() {
    console.log(this.$heropy)
  }
}
</script>

⭐보통 vue.js플러그인은 앞에 $를 붙여 구분지을 수 있도록 해줍니다.

1-2. 플러그인 연결(main.js)

import { createApp } from 'vue'
import heropy from './plugins/heropy'
import App from './App.vue'

createApp(App)
//use메소드를 통해 생성한 파일을 연결해줍니다
  .use(heropy)
  .mount('#app')

1-3. 등록한 전역속성 사용

App.vue

<template>
  App.vue
</template>

<script>
export default {
  data() {
    return {
      heropy: ''
    }
  },
  created() {//$와 함께 사용
    console.log(this.$heropy)
  }
}
</script>

2. Vuex 기본 구성

Vue vs Vuex 비교

State: 반응형 data라고 생각(상태)

Getters : computed라고 생각

Mutations, Actions: methods

vuex공식문서

vuex는 개발에서도 사용을 하기 때문에 일반의존성으로 설치를 해줍니다.

2-1 vuex설치 및 연결

설치

$ npm install vuex@next

연결

import { createStore } from 'vuex'
// Create a new store instance.
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

2-2 src > store >index.js 생성

store이라는 디렉토리를 만들어 그 안에서 store을 관리해보도록 하겠습니다.

import {createStore} from 'vuex'

export default createStore({
  
})

2-3 main.js

import { createApp } from 'vue'
import store from './store'
import App from './App.vue'

createApp(App)
  .use(store)
  .mount('#app')

3. Vuex 실습

3-1 store에 접근방법

⭐vue컴포넌트에서 store접근 방법

store쪽의 데이터에 접근하기 위해서는 computed를 사용해야합니다.

computed에서this.$store.commit(mutations에 정의된 함수)를 이용해 store에 접근할 수 있습니다.

✨단, mutaions를 바로 사용하는 것보다 컴포넌트에서 사용을 할 actions을 따로 만들어 사용하게 하는 것이 좋습니다. 즉, mutation는 내부에서만 사용하는 것이 좋습니다

컴포넌트에서 actions에 접근하기 위해 dispatch메소드를 사용할 수 있습니다.this.$store.dispatch(actions에 정의된 함수)

mutation안에 정의된 함수의 인수로 state와 payload를 넘길 수 있습니다.

const { state, getters, commit, dispatch } = context

⭐store의 mutations

store쪽의 데이터를 변화시켜주기 위해서는 mutations를 이용해야합니다.
또한 mutation에서는 this가 아니라 state라는 객체를 매개변수로 받아 접근을 할 수 있습니다.
App.vue

<template>
  {{ heropy }}
  <button @click="increase">
    Increase
  </button>
</template>

<script>
export default {
  computed: {
    heropy() {
      return this.$store.state.count
    }
  },
  methods: {
    increase() {
    //⭐vue컴포넌트에서 commit을 통해 mutations에 바로 접근하는 것은 권장하지 않습니다.   
    //  this.$store.commit('increase')
   //⭐ actions를 따로 만들어 dispatch를 이용해 접근하는 것을 권장합니다.
      this.$store.dispatch('increase')
    }
  }
}
</script>

index.js

import { createStore } from 'vuex'

export default createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    //만약, 인수가 있는 함수를 받는 경우 payload를 이용해 받을 수 있습니다.
    increase(state, payload) {
      state.count+=1
    }
  },
  actions: {
    increase(/*context*/ {commit}) {
     // const { state, getters, commit, dispatch}  = context
      commit('increase')
    }
  }
})

⭐Core Concepts

state(data), Getter(computed)는 반응형데이터로 속성처럼 사용하면 됩니다.

Mutations와 Actions(methods)는 함수로 호출을 해주어야합니다.(함수호출은 commit과 dispatch로 할 수 있습니다.)

commit (Mutations)

dispatch (Actions)