vue/vuex에서 편집 저장 또는 취소

vue/vuex에서 편집 저장 또는 취소

다음과 같은 사용자 데이터를 처리하는 컴포넌트가 있습니다.firstName,lastName입력(텍스트 필드, 커스텀 셀렉트 등)을 통한 등

이 데이터를 저장하는 vuex 저장소가 있으며 구성 요소 필드는 다음과 같이 바인딩되어 있습니다.v-model하게.

이러한 필드를 편집할 수 있도록 하고 싶지만 사용자가 필드 중 하나를 편집하기 시작하면 단추가Save그리고.Cancel표시됩니다.

클릭Save버튼을 클릭하면 변경이 적용됩니다.Cancel는 모든 필드를 편집을 시작하기 전의 상태로 되돌립니다.

이 작업에 대한 베스트 프랙티스/패턴이 있는지 궁금합니다.

그게 최선책인지는 모르겠지만, 비슷한 일을 어떻게 해왔는지는 설명할 수 있어요.전 2개의 부동산을 가지고 있어요formFieldsModified그리고.formFieldsInitialState.

data() {
    return {
        formFieldsModified: false,
        formFieldsInitialState: {}
    }
}

컴포넌트가 마운트/생성되면 메서드를 호출합니다.setFormFieldsInitialState.

created: function () {
    this.$store.dispatch('LOAD_USER').then((item) => {
        this.setFormFieldsInitialState()
    });
}

현재와 비교할 수 있도록 lodash를 사용하여 개체의 딥 클론을 만듭니다.user변경사항이 없는지 확인합니다.

setFormFieldsInitialState() {
    this.formFieldsInitialState = _.cloneDeep(this.user)
    this.formFieldsModified = false;
}

그러면 모델의 변경 사항을 확인할 수 있습니다. 예를 들어, 모델 이름이user.

watch: {
    'user': {
        handler: function (val) {
            this.formFieldsModified = (!_.isEqual(val, this.formFieldsInitialState)) ? true : false;
        },
        deep: true
    }
}

이제 사용할 수 있습니다.this.formFieldsModified양식 필드의 수정 여부에 따라 단추 표시 여부를 전환합니다.

취소/저장 액션에서는 실제로 스토어를 갱신하는 다른 방법을 사용해야 합니다.따라서 사용자가 [저장]버튼을 클릭하여 스토어를 갱신하는 액션을 디스패치하지 않는 한 아무 일도 일어나지 않습니다.그 후 를 사용할 수 있습니다.formFieldsInitialState값을 원래대로 되돌리기 위해 생성된 개체입니다.

언급URL : https://stackoverflow.com/questions/54564028/save-or-cancel-edits-in-vue-vuex