Vuex 4 — 모듈 네임스페이스
6811 단어 vueprogrammingjavascriptwebdev
지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.
Vuex 4는 베타 버전이며 변경될 수 있습니다.
Vuex는 Vue의 인기 있는 상태 관리 라이브러리입니다.
Vuex 4는 Vue 3에서 작동하도록 만들어진 버전입니다.
이 기사에서는 Vue 3에서 Vuex 4를 사용하는 방법을 살펴보겠습니다.
네임스페이스 모듈의 전역 자산 액세스
네임스페이스 모듈의 전역 자산에 액세스할 수 있습니다.
예를 들어 다음과 같이 작성할 수 있습니다.
<!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="this['moduleA/increment']">increment</button>
<p>{{this['moduleA/doubleCount']}}</p>
</div>
<script>
const moduleA = {
state: () => ({
count: 0
}),
mutations: {
increment(state) {
state.count++;
}
},
actions: {
increment({ commit, dispatch }) {
commit("increment");
commit("someAction", null, { root: true });
}
},
getters: {
doubleCount(state) {
return state.count * 2;
}
}
};
const store = new Vuex.Store({
mutations: {
someAction(state) {
console.log("someAction");
}
},
modules: {
moduleA: {
namespaced: true,
...moduleA
}
}
});
const app = Vue.createApp({
methods: {
...Vuex.mapActions(["moduleA/increment"])
},
computed: {
...Vuex.mapGetters(["moduleA/doubleCount"])
}
});
app.use(store);
app.mount("#app");
</script>
</body>
</html>
루트 네임스페이스에서
increment 돌연변이를 커밋하는 someAction 작업이 있습니다.따라서
moduleA/increment 작업을 디스패치할 때 'someAction'가 기록된 것을 볼 수 있습니다.commit 속성이 있는 객체로 root: true를 호출하여 루트 돌연변이를 전달하도록 설정했습니다.우리는 행동으로 똑같이 할 수 있습니다. 예를 들어 다음과 같이 작성할 수 있습니다.
<!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="this['moduleA/increment']">increment</button>
<p>{{this['moduleA/doubleCount']}}</p>
</div>
<script>
const moduleA = {
state: () => ({
count: 0
}),
mutations: {
increment(state) {
state.count++;
}
},
actions: {
increment({ commit, dispatch }) {
commit("increment");
dispatch("someOtherAction", null, { root: true });
}
},
getters: {
doubleCount(state) {
return state.count * 2;
}
}
};
const store = new Vuex.Store({
mutations: {
someAction(state) {
console.log("someAction");
}
},
actions: {
someOtherAction({ commit }) {
commit("someAction");
}
},
modules: {
moduleA: {
namespaced: true,
...moduleA
}
}
});
const app = Vue.createApp({
methods: {
...Vuex.mapActions(["moduleA/increment"])
},
computed: {
...Vuex.mapGetters(["moduleA/doubleCount"])
}
});
app.use(store);
app.mount("#app");
</script>
</body>
</html>
dispatch 속성이 있는 객체로 root: true를 호출하여 루트 작업을 전달하도록 설정했습니다.rootGetters 속성을 사용하여 루트 게터에 액세스할 수 있습니다.이를 위해 다음과 같이 작성합니다.
<!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="this['moduleA/increment']">increment</button>
<p>{{this['moduleA/doubleCount']}}</p>
</div>
<script>
const moduleA = {
state: () => ({
count: 0
}),
mutations: {
increment(state) {
state.count++;
}
},
actions: {
increment({ commit, dispatch, rootGetters }) {
console.log("increment", rootGetters.one);
commit("increment");
}
},
getters: {
doubleCount(state, getters, rootState, rootGetters) {
console.log("doubleCount", rootGetters.one);
return state.count * 2;
}
}
};
const store = new Vuex.Store({
getters: {
one(state) {
return 1;
}
},
modules: {
moduleA: {
namespaced: true,
...moduleA
}
}
});
const app = Vue.createApp({
methods: {
...Vuex.mapActions(["moduleA/increment"])
},
computed: {
...Vuex.mapGetters(["moduleA/doubleCount"])
}
});
app.use(store);
app.mount("#app");
</script>
</body>
</html>
스토어 루트에
one 루트 getter 메소드가 있습니다.그런 다음
rootGetters 메서드의 개체 매개변수에 increment 속성이 있습니다.rootGetters.one 속성에서 getter의 반환 값을 얻을 수 있습니다.다른 getter는
rootGetters 매개변수에서 값을 가져올 수 있습니다.결론
상점을 고유한 상태를 가진 더 작은 청크로 나누도록 상점의 이름을 지정할 수 있습니다.
Reference
이 문제에 관하여(Vuex 4 — 모듈 네임스페이스), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aumayeung/vuex-4-modules-namespace-gec텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
