Vuex 4 — 돌연변이
6350 단어 vueprogrammingjavascriptwebdev
지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.
Vuex 4는 베타 버전이며 변경될 수 있습니다.
Vuex는 Vue의 인기 있는 상태 관리 라이브러리입니다.
Vuex 4는 Vue 3에서 작동하도록 만들어진 버전입니다.
이 기사에서는 Vue 3에서 Vuex 4를 사용하는 방법을 살펴보겠습니다.
객체 스타일 커밋
commit 메서드에 객체를 전달할 수 있습니다.예를 들어 다음과 같이 작성할 수 있습니다.
<!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="decrement">decrement</button>
<p>{{count}}</p>
</div>
<script>
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
decrement(state, payload) {
state.count -= payload.amount;
}
}
});
const app = Vue.createApp({
methods: {
decrement() {
this.$store.commit({
type: "decrement",
amount: 5
});
}
},
computed: {
count() {
return this.$store.state.count;
}
}
});
app.use(store);
app.mount("#app");
</script>
</body>
</html>
this.$store.commit 메서드에 객체를 전달합니다.type 이외의 속성은 payload 개체에서 끝납니다.따라서
amount 돌연변이 방법에서 payload.amount를 사용하여 decrement 속성에 액세스할 수 있습니다.돌연변이는 Vue 3의 반응성 규칙을 따르므로 반응성 상태 변수가 업데이트될 때마다 저장 상태가 변경됩니다.
돌연변이 유형에 상수 사용
돌연변이 유형에 상수를 사용할 수 있습니다.
예를 들어 다음과 같이 작성할 수 있습니다.
<!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="decrement">decrement</button>
<p>{{count}}</p>
</div>
<script>
const DECREMENT = "decrement";
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
[DECREMENT](state) {
state.count -= 1;
}
}
});
const app = Vue.createApp({
methods: {
decrement() {
this.$store.commit(DECREMENT);
}
},
computed: {
count() {
return this.$store.state.count;
}
}
});
app.use(store);
app.mount("#app");
</script>
</body>
</html>
DECREMENT 속성과 mutations 메서드에서 돌연변이 이름으로 전달한 commit 상수를 전달했습니다.여러 곳에서 같은 이름을 재사용할 때 유용합니다.
돌연변이는 동기적이어야 합니다.
돌연변이는 동기적이어야 합니다.
코드를 추적할 수 있도록 내부의 코드가 순서대로 실행되어야 하기 때문입니다.
구성 요소에서 돌연변이 커밋
mapMutations 메서드를 호출하여 돌연변이를 메서드에 매핑할 수 있습니다.예를 들어 다음과 같이 작성할 수 있습니다.
<!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="decrement">decrement</button>
<p>{{count}}</p>
</div>
<script>
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
decrement(state) {
state.count -= 1;
}
}
});
const app = Vue.createApp({
methods: {
...Vuex.mapMutations(["decrement"])
},
computed: {
count() {
return this.$store.state.count;
}
}
});
app.use(store);
app.mount("#app");
</script>
</body>
</html>
Vuex.mapMutations 메서드를 메서드에 호출합니다.그런 다음 감소 버튼을 클릭할 때 실행할 수 있습니다.
페이로드는
mapMutations 로 돌연변이를 매핑할 때 지원됩니다.다음을 사용하여 다른 이름을 가진 메서드에 변형을 매핑할 수 있습니다.
<!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="subtract">decrement</button>
<p>{{count}}</p>
</div>
<script>
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
decrement(state) {
state.count -= 1;
}
}
});
const app = Vue.createApp({
methods: {
...Vuex.mapMutations({
subtract: "decrement"
})
},
computed: {
count() {
return this.$store.state.count;
}
}
});
app.use(store);
app.mount("#app");
</script>
</body>
</html>
decrement 돌연변이를 subtract 전달한 객체의 키를 사용하여 mapMutations 메서드에 매핑했습니다.결론
Vuex 상태 데이터를 변경하기 위해 다양하게 생성하고 변형할 수 있습니다.
Reference
이 문제에 관하여(Vuex 4 — 돌연변이), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aumayeung/vuex-4-mutations-3e9j텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
