세터는

Question

나는 store.js에서 가치를 두 확인란을하고 양식을 통해 백엔드을 보내고 싶어요 특성 :

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 문서에서 described으로 계산 된 속성에 setter를 정의 할 수 있다는 것을 알고 있지만, 특정 경우와 같이 설정할 여러 값이있는 경우이를 수행하는 방법을 알지 못합니다.

문제를 해결해 주셔서 감사합니다.

Answer 1

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

당신이 notification 상태를 변경하는 돌연변이 setNotification을 제공, 당신은 다음과 같은 구성 요소의 속성을 구성 할 수 있습니다

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

가 이제 정상적으로 v-model="notification"와 결합 할 수 있습니다.

자세한 내용은 문서의 Form Handling을 참조하십시오.

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', 
    }), 
}