Vuex 4 — 게터 및 돌연변이
5198 단어 vueprogrammingjavascriptwebdev
지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.
Vuex 4는 베타 버전이며 변경될 수 있습니다.
Vuex는 Vue의 인기 있는 상태 관리 라이브러리입니다.
Vuex 4는 Vue 3에서 작동하도록 만들어진 버전입니다.
이 기사에서는 Vue 3에서 Vuex 4를 사용하는 방법을 살펴보겠습니다.
메서드 스타일 게터
하나 이상의 인수를 취하는 getter를 만들 수 있습니다.
이를 위해 다음과 같이 작성할 수 있습니다.
<!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">
<div>
<p>{{getTodoById(1).text}}</p>
</div>
</div>
<script>
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: "eat", done: true },
{ id: 2, text: "sleep", done: false }
]
},
getters: {
getTodoById: (state) => (id) => {
return state.todos.find((todo) => todo.id === id);
}
}
});
const app = Vue.createApp({
computed: {
...Vuex.mapGetters(["getTodoById"])
}
});
app.use(store);
app.mount("#app");
</script>
</body>
</html>
상태가
todos인 상점을 만들었습니다.그리고
getTodosById getter 메서드는 id 매개변수를 사용하고 주어진 state.todos 값과 일치하는 id 항목을 반환하는 함수를 반환합니다.루트 Vue 인스턴스에서
Vuex.mapGetters을 호출하여 getter를 메서드에 매핑했습니다.이런 식으로 템플릿에서 했던 것처럼 컴포넌트에서 호출할 수 있습니다.
돌연변이
돌연변이를 사용하여 스토어의 상태를 변경할 수 있습니다.
예를 들어 다음과 같이 작성할 수 있습니다.
<!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--;
}
}
});
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의 값을 1만큼 줄이는 state.count 돌연변이가 있습니다.그런 다음
this.$store.commit 메서드를 호출하여 count 상태를 업데이트하는 돌연변이를 호출할 수 있습니다.count 상태 값을 얻기 위해 계산된 count 속성도 있습니다.페이로드로 커밋
페이로드를 사용하는 돌연변이를 만들 수 있습니다.
돌연변이 방법은 값과 함께 두 번째 매개변수를 허용합니다.
예를 들어 다음과 같이 작성할 수 있습니다.
<!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, n) {
state.count -= n;
}
}
});
const app = Vue.createApp({
methods: {
decrement() {
this.$store.commit("decrement", 5);
}
},
computed: {
count() {
return this.$store.state.count;
}
}
});
app.use(store);
app.mount("#app");
</script>
</body>
</html>
n 매개변수를 decrement 돌연변이 방법에 추가하여 state.count에서 n을 뺍니다.그런 다음
commit에서 빼려는 값을 전달하기 위해 두 번째 인수로 state.count을 호출합니다.이제 감소 버튼을 클릭하면
count 값이 표시되는 것을 볼 수 있습니다.결론
Vuex 4로 상태 데이터를 수정하기 위해 돌연변이를 생성할 수 있습니다.
Getter는 인수를 전달할 수 있도록 메서드 스타일 getter로 정의할 수 있습니다.
Reference
이 문제에 관하여(Vuex 4 — 게터 및 돌연변이), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aumayeung/vuex-4-getters-and-mutations-5bhh텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
