vuex

framework utility reactive

Vuex는 Vue.js 애플리케이션의 상태 관리 패턴과 라이브러리입니다. 상태의 변화를 예측 가능하게 만들고 여러 컴포넌트 간에 상태를 공유할 때 사용합니다.

Latest Ver 4.1.0

Homepage

Github

28,463

📢 Vuex는 Vue.js에서 사용할 수 있는 중앙 집중식 상태 관리 시스템을 제공합니다.

CDN 다운로드

License: MIT

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/vuex/4.1.0/vuex.cjs.js

https://cdnjs.cloudflare.com/ajax/libs/vuex/4.1.0/vuex.cjs.min.js

https://cdnjs.cloudflare.com/ajax/libs/vuex/4.1.0/vuex.esm-browser.js

https://cdnjs.cloudflare.com/ajax/libs/vuex/4.1.0/vuex.esm-browser.min.js

https://cdnjs.cloudflare.com/ajax/libs/vuex/4.1.0/vuex.esm-browser.prod.js

https://cdnjs.cloudflare.com/ajax/libs/vuex/4.1.0/vuex.esm-browser.prod.min.js

https://cdnjs.cloudflare.com/ajax/libs/vuex/4.1.0/vuex.esm-bundler.js

https://cdnjs.cloudflare.com/ajax/libs/vuex/4.1.0/vuex.esm-bundler.min.js

https://cdnjs.cloudflare.com/ajax/libs/vuex/4.1.0/vuex.global.js

https://cdnjs.cloudflare.com/ajax/libs/vuex/4.1.0/vuex.global.min.js

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요.

📄 HTML
<div id='app'></div>

🧩 External JS
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

⚙️ JavaScript
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
});

// components can dispatch actions
store.commit('increment');
console.log(store.state.count); // 1