Vuex 4 — 작업 및 구성 요소
5075 단어 vueprogrammingjavascriptwebdev
지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.
Vuex 4는 베타 버전이며 변경될 수 있습니다.
Vuex는 Vue의 인기 있는 상태 관리 라이브러리입니다.
Vuex 4는 Vue 3에서 작동하도록 만들어진 버전입니다.
이 기사에서는 Vue 3에서 Vuex 4를 사용하는 방법을 살펴보겠습니다.
구성 요소의 작업 디스패치
mapActions 메서드를 사용하여 작업을 구성 요소 메서드에 매핑할 수 있습니다.예를 들어 다음과 같이 작성할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.global.js"></script>
<title>App</title>
</head>
<body>
<div id="app">
<button @click="increment">increment</button>
<p>{{count}}</p>
</div>
<script>
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
increment({ commit }) {
commit("increment");
}
}
});
const app = Vue.createApp({
methods: {
...Vuex.mapActions(["increment"])
},
computed: {
count() {
return this.$store.state.count;
}
}
});
app.use(store);
app.mount("#app");
</script>
</body>
</html>
Vuex.mapActions를 호출하여 작업을 메서드에 매핑했습니다.액션과 다른 이름으로 메서드에 매핑할 수도 있습니다.
예를 들어 다음과 같이 작성할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.global.js"></script>
<title>App</title>
</head>
<body>
<div id="app">
<button @click="add">increment</button>
<p>{{count}}</p>
</div>
<script>
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
increment({ commit }) {
commit("increment");
}
}
});
const app = Vue.createApp({
methods: {
...Vuex.mapActions({ add: "increment" })
},
computed: {
count() {
return this.$store.state.count;
}
}
});
app.use(store);
app.mount("#app");
</script>
</body>
</html>
Vuex.mapActions 작업을 increment 메서드에 매핑하기 위해 개체를 add에 전달했습니다.키는 매핑하려는 메서드 이름입니다.
작업 작성
작업은 종종 비동기식입니다. Promise를 반환하여 완료되었는지 확인할 수 있습니다.
예를 들어 다음과 같이 작성할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.global.js"></script>
<title>App</title>
</head>
<body>
<div id="app">
<button @click="increment2">increment</button>
<p>{{count}}</p>
</div>
<script>
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state, amount) {
state.count += amount;
}
},
actions: {
async increment({ commit }) {
return commit("increment", 1);
},
async increment2({ commit }) {
await commit("increment", 1);
return commit("increment", 2);
}
}
});
const app = Vue.createApp({
methods: {
...Vuex.mapActions(["increment2"])
},
computed: {
count() {
return this.$store.state.count;
}
}
});
app.use(store);
app.mount("#app");
</script>
</body>
</html>
금액이 1인
increment2 작업을 전달하는 increment 작업이 있습니다.그런 다음 수량 2로 다시 발송합니다.
약속이고 첫 번째 약속을 기다렸기 때문에 순차적으로 실행됩니다.
결론
Vuex 4를 사용하여 다양한 방식으로 작업을 전달할 수 있습니다.
Vuex.mapActions 를 사용하여 작업을 메서드에 매핑할 수 있습니다.
Reference
이 문제에 관하여(Vuex 4 — 작업 및 구성 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aumayeung/vuex-4-actions-and-components-cpo텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
