Vuex 4 — 동적 모듈 등록 및 로깅
7835 단어 vueprogrammingjavascriptwebdev
지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.
Vuex 4는 베타 버전이며 변경될 수 있습니다.
Vuex는 Vue의 인기 있는 상태 관리 라이브러리입니다.
Vuex 4는 Vue 3에서 작동하도록 만들어진 버전입니다.
이 기사에서는 Vue 3에서 Vuex 4를 사용하는 방법을 살펴보겠습니다.
동적 모듈 등록
store.registerModule 메소드로 스토어를 생성한 후 모듈을 등록할 수 있습니다.예를 들어 다음과 같이 작성할 수 있습니다.
<!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>{{doubleCount}}</p>
</div>
<script>
const moduleA = {
state: () => ({
count: 0
}),
mutations: {
increment(state) {
state.count++;
}
},
getters: {
doubleCount(state) {
return state.count * 2;
}
}
};
const store = new Vuex.Store({});
store.registerModule("moduleA", moduleA);
const app = Vue.createApp({
methods: {
...Vuex.mapMutations(["increment"])
},
computed: {
...Vuex.mapGetters(["doubleCount"])
}
});
app.use(store);
app.mount("#app");
</script>
</body>
</html>
모듈을 등록하기 위해 모듈 이름과 객체로
store.registerModule 메서드를 호출했습니다.그런 다음 다른 모듈과 마찬가지로 구성 요소에서 사용할 수 있습니다.
플러그인
스토어에서 플러그인을 만들고 사용할 수 있습니다.
이렇게 하려면
store 매개변수를 사용하는 함수를 만들고 함수에서 이 매개변수로 작업을 수행하면 됩니다.예를 들어 다음과 같이 작성할 수 있습니다.
<!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>{{doubleCount}}</p>
</div>
<script>
const myPlugin = (store) => {
store.subscribe((mutation, state) => {
console.log(state);
});
};
const store = new Vuex.Store({
state: () => ({
count: 0
}),
mutations: {
increment(state) {
state.count++;
}
},
getters: {
doubleCount(state) {
return state.count * 2;
}
},
plugins: [myPlugin]
});
const app = Vue.createApp({
methods: {
...Vuex.mapMutations(["increment"])
},
computed: {
...Vuex.mapGetters(["doubleCount"])
}
});
app.use(store);
app.mount("#app");
</script>
</body>
</html>
subscribe 및 mutation 매개변수가 있는 콜백으로 state를 호출했습니다.mutation 커밋 중인 돌연변이 데이터가 있습니다.state 상점의 현재 상태가 있습니다.내장 로거 플러그인
기록된 플러그인은 Vuex 4에서 제공합니다.
이를 사용하기 위해
createLogger 함수를 호출합니다.예를 들어 다음과 같이 작성할 수 있습니다.
<!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>{{doubleCount}}</p>
</div>
<script>
const store = new Vuex.Store({
state: () => ({
count: 0
}),
mutations: {
increment(state) {
state.count++;
}
},
getters: {
doubleCount(state) {
return state.count * 2;
}
},
plugins: [Vuex.createLogger()]
});
const app = Vue.createApp({
methods: {
...Vuex.mapMutations(["increment"])
},
computed: {
...Vuex.mapGetters(["doubleCount"])
}
});
app.use(store);
app.mount("#app");
</script>
</body>
</html>
그것을 사용합니다.
Vuex.createLogger 메서드를 호출하여 기록된 플러그인을 반환하고 plugins 배열로 전달합니다.이 메서드는 옵션으로 사용할 수 있는 몇 가지 속성이 있는 개체를 사용합니다.
다양한 필터입니다.
예를 들어 다음과 같이 작성할 수 있습니다.
<!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>{{doubleCount}}</p>
</div>
<script>
const store = new Vuex.Store({
state: () => ({
count: 0
}),
mutations: {
increment(state) {
state.count++;
}
},
getters: {
doubleCount(state) {
return state.count * 2;
}
},
plugins: [
Vuex.createLogger({
collapsed: false,
filter(mutation, stateBefore, stateAfter) {
return mutation.type !== "foo";
},
actionFilter(action, state) {
return action.type !== "foo";
},
transformer(state) {
return state.subTree;
},
mutationTransformer(mutation) {
return mutation.type;
},
actionTransformer(action) {
return action.type;
},
logActions: true,
logMutations: true,
logger: console
})
]
});
const app = Vue.createApp({
methods: {
...Vuex.mapMutations(["increment"])
},
computed: {
...Vuex.mapGetters(["doubleCount"])
}
});
app.use(store);
app.mount("#app");
</script>
</body>
</html>
동작을 설정합니다.
filter를 사용하면 돌연변이 또는 상태를 필터링하여 기록할 수 있습니다.actionFilter 작업 또는 상태 속성별로 작업을 필터링할 수 있습니다.transformer 로그 출력을 변환할 수 있습니다.mutationTransformer를 사용하면 돌연변이 로그 출력을 변환할 수 있습니다.actionTransformer 작업 로그 출력을 변환할 수 있습니다.logActions는 true인 경우 작업을 기록하도록 하는 부울입니다.logMutations true 인 경우 돌연변이를 기록할 수 있습니다.logger 로깅을 수행하는 데 사용할 로거를 설정할 수 있습니다.결론
Vuex 4 스토어 모듈을 동적으로 등록할 수 있습니다.
또한 Vuex 4에는 자체 로거가 함께 제공됩니다.
Reference
이 문제에 관하여(Vuex 4 — 동적 모듈 등록 및 로깅), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aumayeung/vuex-4-dynamic-module-registration-and-logging-51g8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
