[javascript] Parcel에서 Vuex를 사용하는 방법은?
- 먼저,
parcel-bundler
를 설치합니다.npm install -g parcel-bundler
- Vuex를 설치합니다.
npm install vuex
- Vue 컴포넌트를 생성합니다. ```javascript
// MyComponent.vue
{{ message }}
<button @click="changeMessage">Change Message</button>
4. Vuex store를 생성합니다.
```javascript
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
message: 'Hello Vuex!'
},
mutations: {
setMessage(state, message) {
state.message = message;
}
},
actions: {
changeMessage({ commit }) {
commit('setMessage', 'New Message');
}
}
});
- Vue 앱을 생성하고 Vuex store를 등록합니다. ```javascript // main.js import Vue from ‘vue’; import MyComponent from ‘./MyComponent.vue’; import store from ‘./store’;
new Vue({ el: ‘#app’, store, render: h => h(MyComponent) }); ```
parcel index.html
명령어를 사용하여 앱을 빌드 및 실행합니다.
이제 Parcel에서 Vuex를 사용할 준비가 되었습니다! Vuex store를 사용하여 상태를 관리하고 Vue 컴포넌트에서 상태를 업데이트하고 변경할 수 있습니다.