[VueJs] 뷰 플러그인 - Veux 사용하기

 뷰 플러그인 - Veux 사용하기

1. Vuex 란?

  - Vue.js의 상태관리 패턴 플러그인.

  - 애플리케이션의 모든 컴포넌트의 글로벌 저장소 역할한다.

  - 여러 컴포넌트가 하나의 데이터를 공유하거나, 수평적인 컴포넌트 간의 데이터 공유시 사용

2. Vuex의 예제

  1) 설치

    - vuex는 vue-cli 에 기본적으로 포함되어 있지 않기 때문에 따로 설치 해야한다.

    npm install --save vuex

  2) 설정

    - src/main.js

    // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state:{ count : 0 }, mutations:{ increment(state){ state.count += 1 }, decrement(state){ state.count -= 1 } } }) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', store, router, components: { App }, template: '<App/>' })  

  3) 사용

    - Counter.vue

      <template> <div> <button @click="increment">증가</button> <button @click="decrement">감소</button> </div> </template> <script> export default { name: "counter", methods:{ increment(){ this.$store.commit('increment') }, decrement(){ this.$store.commit('decrement') } } } </script> <style scoped> </style>  

   - App.vue

      <template> <div id="app"> count : {{ $store.state.count }} <counter/> <counter/> <counter/> </div> </template> <script> import Counter from './components/Counter' export default { name: 'App', components:{ Counter } } </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>