"Vuex 시작하기"의 두 판 사이의 차이

2021년 4월 20일 (화) 22:44 기준 최신판

1 개요[ | ]

Vuex 시작하기

<div id="app">
  <span>{{ count }}</span>
  <button @click="increment">+</button>
</div>

<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/vuex/dist/vuex.min.js"></script>
<script>
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

new Vue({
  el: '#app',
  computed: {
    count() {
      return store.state.count
    }
  },
  methods: {
    increment() {
      store.commit('increment')
      console.log(store.state.count)
    }
  }
})
</script>

2 같이 보기[ | ]

Vue.js methods

3 참고[ | ]

https://vuex.vuejs.org/kr/guide/

@@ 2번째 줄: / 2번째 줄: @@
 ;Vuex 시작하기
-* CDN 사용예시
+<syntaxhighlight lang='html' run>
-<syntaxhighlight lang='html'>
 <div id="app">
    <span>{{ count }}</span>
@@ 9번째 줄: / 8번째 줄: @@
 </div>
-<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue/dist/vue.min.js"></script>
-<script src="//unpkg.com/vuex"></script>
+<script src="//unpkg.com/vuex/dist/vuex.min.js"></script>
 <script>
 const store = new Vuex.Store({
@@ 39번째 줄: / 38번째 줄: @@
 </script>
 </syntaxhighlight>
-<jsfiddle>bkcnh3r5</jsfiddle>
 ==같이 보기==