Nuxt.js의 Vuex의 점포 분할에 따른 구조

상점을 통해 데이터를 관리하는 장점은?

나는 다음과 같은 두 가지라고 생각한다.

구성 요소 간의 값 교환이 필요 없음

구성 요소의 상업 논리를 상점으로 잘라내기

Vuex에서 state로 값을 유지하고 Getter로 구성 요소 측면에서 가져옵니다.mutaations를 통해 값을 변경하여 actions에서 API 통신과 외부 저장소에 접근하는 등 mutaations에서 무책임하게 처리합니다.
상점을 이용하면 이런 구성 요소의 상업 논리가 상점에 집중돼 관리가 쉬워진다는 것이다.
또한 전 세계적으로 데이터를 보유할 수 있기 때문에 부모 구성 요소에서 하위 구성 요소로props를 통해 값을 전달하는 등 처리할 필요가 없다.

왜 분할 관리점 내의 처리를 하려고 합니까?

응용 프로그램이 커지면서 상점에는 다양한 처리와 데이터가 모여 관리도 복잡해진다.
이 문제를 해결하기 위해서는 상점을 분할 관리해야 한다.
그러나 책 《Vue.입문 기초부터 실천 응용 프로그램 개발까지》에는 다음과 같은 기술이 있다.
Vuex는 유일하게 신뢰할 수 있는 정보원을 전제로 실시되었다.응용 프로그램에 상점이 하나만 존재합니다.
나는 상점을 분할하는 것은 상술한 규정을 위반하는 것이라고 생각하지만 Vuex는 모듈 기능이 있어 이 점을 고려한 토대에서 분할할 수 있다.

모듈로 나누기

아래와 같이 modules 옵션을 사용하여 분할할 수 있습니다.namespaced: true에 설정되어 있기 때문에 구성 요소 측면에서 this.$store.getters('users/getUser') 형식으로 정의된 모듈 이름을 호출합니다.이 옵션은 명명 공간을 만들 수 있기 때문에 같은 이름의 방법을 정의해도 이름이 붙는 경우는 없습니다.

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        users: {
            namespaced: true,
            state: {
                user: "taro"
            },
            getters: {
                getUser(state) {
                    return state.user
                }
            },
            mutations: {...},
            actions: {...}
        },
    },
    teams: {
        namespaced: true,
        state: {...},
        getters: {...},
        mutations: {...},
        actions: {...}
    },
});

→상기 실례화 시 매개 변수로 종합하여 모듈에 전달하면 확인하기 어렵지만 파일 분할 등을 통해 관리할 수 있다.
https://vuex.vuejs.org/ja/guide/modules.html

Nuxt.js의 Vuex를 위한 모드

Vuex에는 클래식 모드와 모듈 모드 두 가지가 있습니다.(고전 모드는 Nuxt3에서 폐지됨)
클래식 모드 => 스토리지 프로세싱을 단일 파일로 관리합니다store/index.js.
모듈 모드 => 여러 파일로 스토리지 관리 처리store/*.js

모듈 모드를 사용하시겠습니까?

상기 저장소를 분할하기 위해서는 store/의 부하에서 {モジュール名}.js 파일, Nuxt를 제작하기만 하면 된다.js는 모듈을 마음대로 생성하여 구성 요소를 사용할 수 있도록 합니다.
이 프레임워크의 기능을 사용해서 아무렇지도 않게 쓰면 쓴 내용을 의식할 필요가 거의 없다.
또한 모듈 모드로 명시적으로 기술된 것이 아니라 다음을 충족할 때 자동으로 Nuxt가 작동합니다.js는 모듈 모드임을 인식한 것 같습니다.

index.js에 export store 대상이 없음

없음store/index.js

https://develop365.gitlab.io/nuxtjs-2.8.X-doc/ja/guide/vuex-store/