Vuex 4 — 작업
7237 단어 vueprogrammingjavascriptwebdev
지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.
Vuex 4는 베타 버전이며 변경될 수 있습니다.
Vuex는 Vue의 인기 있는 상태 관리 라이브러리입니다.
Vuex 4는 Vue 3에서 작동하도록 만들어진 버전입니다.
이 기사에서는 Vue 3에서 Vuex 4를 사용하는 방법을 살펴보겠습니다.
행위
Vuex 4에서 액션은 돌연변이와 유사합니다.
차이점은 작업이 변형을 커밋하고 작업이 비동기 작업을 가질 수 있다는 것입니다.
액션을 생성하기 위해
actions 속성을 스토어에 추가할 수 있습니다.예를 들어 다음과 같이 작성할 수 있습니다.
<!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(context) {
context.commit("increment");
}
}
});
const app = Vue.createApp({
methods: {
increment() {
this.$store.dispatch("increment");
}
},
computed: {
count() {
return this.$store.state.count;
}
}
});
app.use(store);
app.mount("#app");
</script>
</body>
</html>
actions 메서드가 포함된 increment 속성이 있는 Vuex 저장소를 만들었습니다.돌연변이를 커밋하려면
comtext 메서드와 함께 commit 매개변수를 사용합니다.구성 요소에서 작업을 전달하기 위해 작업 이름으로
this.$store.dispatch를 호출합니다.작업에서 비동기 작업을 수행할 수 있습니다.
예를 들어 다음과 같이 작성할 수 있습니다.
<!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: {
incrementAsync({ commit }) {
setTimeout(() => {
commit("increment");
}, 1000);
}
}
});
const app = Vue.createApp({
methods: {
increment() {
this.$store.dispatch("incrementAsync");
}
},
computed: {
count() {
return this.$store.state.count;
}
}
});
app.use(store);
app.mount("#app");
</script>
</body>
</html>
commit 콜백 내부에서 setTimeout를 호출하여 작업 디스패치를 1초 지연했습니다.또한 페이로드로 작업을 전달할 수 있습니다.
예를 들어 다음과 같이 작성할 수 있습니다.
<!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, payload) {
state.count += payload.amount;
}
},
actions: {
incrementAsync({ commit }, payload) {
setTimeout(() => {
commit("increment", payload);
}, 1000);
}
}
});
const app = Vue.createApp({
methods: {
increment() {
this.$store.dispatch("incrementAsync", { amount: 2 });
}
},
computed: {
count() {
return this.$store.state.count;
}
}
});
app.use(store);
app.mount("#app");
</script>
</body>
</html>
payload 작업에 incrementAsync 매개변수를 추가하여 작업에서 페이로드를 수락했습니다.그런 다음
this.$store.dispatch 메서드에 두 번째 인수로 객체를 전달하여 작업을 전달합니다.type 속성과 페이로드에 포함될 임의의 속성이 있는 객체를 전달할 수도 있습니다.<!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, payload) {
state.count += payload.amount;
}
},
actions: {
incrementAsync({ commit }, payload) {
setTimeout(() => {
commit("increment", payload);
}, 1000);
}
}
});
const app = Vue.createApp({
methods: {
increment() {
this.$store.dispatch({ type: "incrementAsync", amount: 2 });
}
},
computed: {
count() {
return this.$store.state.count;
}
}
});
app.use(store);
app.mount("#app");
</script>
</body>
</html>
type는 작업의 이름이고 다른 속성은 payload 작업의 두 번째 인수에 있는 incrementAsync 개체에서 끝납니다.결론
Vuex 4를 사용하여 변형을 커밋하고 비동기 코드를 실행하는 작업을 만들 수 있습니다.
Reference
이 문제에 관하여(Vuex 4 — 작업), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aumayeung/vuex-4-actions-1p2b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
