믹스인(Mixins)과 스토어(Store) 생각 정리

해당 글은 Vue.js를 공부하면서 '믹스인과 스토어를 언제 사용하고, 어떻게 다를까?' 라는 생각이 들어서 정리한 글입니다.

개인적인 생각이므로 전부 맞다고 볼 수 없다고 생각합니다.

 

Mixins

 - Vue.js 기능

 - 공통적으로 사용할 코드를 포함하고 있다.

 - 다중 상속을 지원한다. (Java에서의 인터페이스?)

 - 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법이다.

 

 - 사용 방법

new Vue({
  mixins: [myMixin],	// 뷰에 사용할 믹스인을 선언해준다.
  data() {
  	return {}
  },
  method: {},
})

 - 믹스인과 믹스인을 사용하는 컴포넌트에서 중복된 변수가 있다면 컴포넌트에서 선언된 변수가 우선순위로 사용된다.

 

* 22.07.15 추가

현재는 사용한다면 아래와 같은 형태로 사용하고 있다.

<template>
  <div></div>
</template>

<script>
import myMixins from '../Common/mixins/my-mixins'
export default {
  mixins: [
    myMixins,
  ],
}
</script>

 

Store

 - Vuex 기능

 - 모든 컴포넌트에서 공통된 값을 사용 가능

 - 프로젝트 모든 곳에서 이를 참고해서 사용 가능

 

 - 사용 방법

data() {
  return {
    myData() {
      return this.$store.state.myData	// 스토어의 state 접근
    },
    
    getData() {
      return this.$store.getters.getData	// 스토어의 getters 접근
    },
  }
},
methods: {
  setData() {
    this.$store.commit('setData')	// 스토어의 mutations 접근
  },
  
  updateData() {
    this.$store.dispatch('updateData')	// 스토어의 actions 접근
  },
},

 or

import {
  mapState,
  mapGetters,
  mapMutations,
  mapActions, 
} from 'vuex'

export default {
  // computed: mapState({	// 스토어의 state 접근
  //  myData: state => state.myData,
  // },
  computed: {
    ...mapState({	// 스토어의 state 접근
      ['myData']
    }),
    
    ...mapGetters(['getData']),	// 스토어의 getters 접근
  },
  methods: {
    ...mapMutations(['setData']),	// 스토어의 mutations 접근
    
    ...mapActions(['updateData']),	// 스토어의 actions 접근
  },
}

 

* 22.07.15 추가

현재는 사용한다면 아래와 같은 형태로 사용하고 있다.

import { sync, get, call } from 'vuex-pathify'

export default {
  computed: {
    ...sync('storeName', [	// sync는 store에 있는 변수를 가져와서 수정이 가능하다. 마치 data에 선언된 변수처럼)
      'dataOne',
      'dataTwo',
    ]),
    ...get('storeName', [	// get은 store에 있는 변수를 가져만오고 수정할 수 없다.
      'dataThree',
      'dataFour',
    ]),
  },
  method: {
    reset: call('storeName/reset'),	// actions에 mutation을 commit하는 메소드를 만들어 호출
  },
}

 

 

개인적인 결론

 - 모든 사용자가 같은 값을 사용할 변수 -> store 선언

 - 모든 사용자가 같은 값을 사용할 필요가 없는 변수 -> mixins 선언

 

 - 메소드는 위에 값(변수)을 변경 혹은 추가한 곳에 맞게 선언

 

 - DB를 접근할 때는 Store의 Actions에 선언

 

 - Store에서 state를 직접 접근하는 상황도 있겠지만 웬만하면 mutations이나 getters를 만들어서 사용하는 것이 좋다.

 

 

*22.07.15 추가

 - Store는 공통적인 전역 변수를 저장하는데 많이 사용.

   (Store는 vuex-pathify를 사용하니 편리하였다.)

 

 - Mixins은 공통적인 동작을하는 Method를 만들어 놓을 때 사용.

 

개인 혹은 회사에서 사용하는 프로젝트 환경에 따라 다를 수 있습니다.