vue.js의 저장소에서 가져온 계산된 속성에 대한 설정기

vue.js의 저장소에서 가져온 계산된 속성에 대한 설정기

두 개의 체크박스를 만들고 싶습니다.이 체크박스는store.js다음 폼을 통해 백엔드로 전송합니다.

<label>Notify me 
    <input type="checkbox" v-model="notification" value="notification" />       
</label>

<label>Email me 
    <input type="checkbox" v-model="email" value="email" />     
</label>

값을 계산 속성으로 가져옵니다.

computed: {
  BASE_URL () {
    return this.$store.state.BASE_URL;  
  }, 
  notification () {
    return this.$store.state.notification; 
  },

  email () {
    return this.$store.state.email; 
  }
}

문제는 체크박스를 켜도 스토어의 값이 변경되지 않고 콘솔에 다음과 같은 경고가 표시된다는 것입니다.

vue.esm.js?65d7:479 [Vue warn]: Computed property "notification" was assigned to but it has no setter.

vue.js 문서에서 설명한 바와 같이 계산 속성에 setter를 정의할 수 있다는 것은 알고 있지만, 특정 사례와 같이 설정할 값이 여러 개 있는 경우에는 어떻게 정의해야 하는지 모르겠습니다.

이 문제를 해결하는 데 도움을 주셔서 감사합니다.

Vuex 상태를 변경하려면 변환이 필요합니다.

돌연변이가 생긴다면setNotification를 변경하기 위해서notification다음과 같이 컴포넌트의 속성을 설정할 수 있습니다.

computed: {
    notification: {
        get() { return this.$store.state.notification; },
        set(value) { this.$store.commit('setNotification', value); },
    },
},

이것으로, 에 바인드 할 수 있게 되었습니다.v-model="notification"평소와 같이

자세한 내용은 문서의 양식 처리를 참조하십시오.

---

이것은 프로젝트에서 자주 하는 일이기 때문에 계산된 속성을 생성하는 도우미 함수를 작성했습니다.

function mapStateTwoWay(...args) {
    const result = {};

    if (args.length === 1) {
        for (const prop of Object.keys(args[0])) {
            result[prop] = {
                get() { return this.$store.state[prop]; },
                set(value) { this.$store.commit(args[0][prop], value); },
            };
        }
    } else {
        for (const prop of Object.keys(args[1])) {
            result[prop] = {
                get() { return this.$store.state[args[0]][prop]; },
                set(value) { this.$store.commit(args[0] + '/' + args[1][prop], value); },
            };
        }
    }

    return result;
}

다음과 같이 사용합니다.

computed: {
    ...mapStateTwoWay({
        notifications: 'setNotifications',
        email: 'setEmail',
    }),

    // Namespaced
    ...mapStateTwoWay('namespace', {
        notifications: 'setNotifications',
        email: 'setEmail',
    }),
}

언급URL : https://stackoverflow.com/questions/47305082/setter-for-computed-property-obtained-from-store-in-vue-js