하위 구성 요소가 스토어에 액세스할 수 있어야 하는가?

하위 구성 요소가 스토어에 액세스할 수 있어야 하는가?

고지 사항: 죄송합니다, 시간이 좀 오래 걸릴 것 같음

그래서 나는 Vue JS와 Vuex를 이용하여 중간중간 복잡한 앱을 만들고 있어.

이번이 나의 첫 번째 Vue SPA 프로젝트라서 건축적 선택, 특히 "매장에 대해 누가 알아야 하는가?"라는 질문으로 인해 어려움을 겪고 있다.

내 문제를 더미 사례로 설명하겠다.

Say us have a.Post버튼 하나로 전환해야 하는 3가지 상태가 있는 구성 요소:

• 읽기: 구성 요소가title그리고text.
• 업데이트: 구성 요소가 표시됨title입력 및text입력하다
• 작성: 새로운 게시물을 작성할 때 동일한 구성요소가 사용되므로 업데이트와 같으나 값이 비어 있음

첫 번째 방법: 구성 요소가 저장소 데이터를 처리함:

1. 이제 게시물을 보여주고 업데이트하기 위해 구성 요소는id스토어 내의 게시물 목록에서 게시물을 지지하고 선택하고, 필요한 경우 조치를 발송한다.그것은 ...을 가지고 있다.update표시 상태와 업데이트 상태 간에 전환하기 위한 내부 속성.

2. 생성 상태의 경우 nullid구성 요소로 전달되어 저장소에서 아무것도 가져오지 않고 입력을 표시하며 삽입 작업을 전송한다.

예제 코드

const KnowledgebalePost = {
    name: 'Post',
    props: ['id'],
    data() {
        return {
            post: {
                title: '',
                text: '',
            },
            state: 'show'
        }
    },
    methods: {
        updateClicked() {
            this.state = 'update';
        },
        saveClicked() {
            this.state = 'show';
            const postObject = { id: this.id, ...this.post };
            const action = this.id ? 'updatePost' : 'addPost';
            this.$store.dispatch(action, postObject);
        },
    },
    created() {
        if(this.id) {
            // just to simplify
            this.post = this.$store.state.posts[this.id];
        }
    }
};

평.

여기서 내가 보는 이점은 주로 구성요소와 관련된 모든 것을 캡슐화한 것이다.데이터를 어떻게 얻을 수 있는지 알고 있고, 혼자 서있기만 하면 돼. 아이디만 주면 돼.

반면에 너무 많은 것을 아는 것은 문제가 있다. 구성 요소의 범위 밖에 있는 많은 것들이 그것을 깨뜨릴 수 있다.

두 번째 접근법: 구성 요소는 스토어에 대해 아무것도 모른다.

이 접근법에서 구성요소는 모든 것을 재산으로 얻게 된다.id,title,text그리고state입력 또는 텍스트 필드만 렌더링해야 하는지 여부를 알려준다.

그리고 행동을 파견하는 대신에 아마도 사건을 방출할 것이다.

예제 코드

const IgnorantPost = {
    name: 'Post',
    props: ['id', 'title', 'text', 'state'],
    data() {
        return {
            post: {
                title: '',
                text: '',
            },
            internalState: 'show'
        }
    },
    methods: {
        updateClicked() {
            this.internalState = 'update';
        },
        saveClicked() {
            this.internalState = 'show';
            this.$emit('saving', { id: this.id, ...this.post });
        },
    },
    created() {
        this.post.title = this.title;
        this.post.text = this.text;
        this.internalState = this.state;
    }
};

평.

이것은 의존성 문제를 해결하면서도, 만약의 상태가 되는 경우 취급하는 것과 같이 일부 로직을 상위 구성요소로 밀어넣을 뿐이다.Post구성 요소

또한 만약 이 부모에게 다른 많은 자녀가 있다면Post그것은 매우 뚱뚱한 논리 컨테이너가 될 것이다.

끝.

내 구성 요소가 훨씬 더 복잡하다는 점에 유의하십시오. 이 특정 문제에 접근하는 방법에 대한 의견이 있으십니까?

미리 고맙고, 지금까지 읽어줘서 고마워.

"주요 의견 기반"이라는 분야에 꽤 많이 종사하시지만, 제 의견을 말씀드리자면,그 가게는 세계적인 가게다; 물건들이 그 가게와 부품들 사이에 층을 두기 보다는 직접 그것을 조작하도록 하는 쪽으로 기울어져 있다.

그러나 프로그램을 구현하기 위해 사용하고 있는 구성요소의 재사용 가능성이 높은 경우, 일반적인 캡슐화된 방식으로 구현하여 스토어 상호작용을 가속화할 수 있다.

그러나 대부분 나는 가게를 직접 조작한다고 생각한다.

참조URL: https://stackoverflow.com/questions/43904366/should-a-child-component-have-access-to-the-store