입력 필드를 바인딩하고 vuex 상태를 동시에 업데이트하는 방법

입력 필드를 바인딩하고 vuex 상태를 동시에 업데이트하는 방법

저는 리액트 배경에서 왔습니다.소품에서 상태를 설정하기만 하면 전화할 수 있습니다.setState({...})vue/vuex에서는 상태를 갱신할 수 없습니다.

심플화:

Vuex 주

name: "Foo bar"

Vuex 액션

addName

상태를 변경할 수 있지만 입력 필드를 바인딩해야 하며 변경 시 상태가 업데이트됩니다.사용자 세부 정보가 미리 채워져 있고 이름을 변경할 수 있는 업데이트 양식이라고 생각하십시오.

<input @change="addName(newName) v-model="newName" />

추가할 수 있습니다.watch지켜보다newName상태를 갱신합니다만, 사전에 상태를 기입할 필요가 있습니다.하! 내가 할 수 있는 건beforeMount()하지만 내 상태는 아직 로딩되지 않았다.

computed: {
  ...mapState([
  'name'
  ]),
},
beforeMount() {
  // this.newName = this.name
  console.log('Mounted') // Shows in console
  console.log(this.name) // nothing
}

템플테에 이름이 표시됨<pre>{{ name }}</pre>

계산 세터를 사용할 수 있습니다.

computed:{
    name:{
        get: function(){ 
            return store.state.name; 
        }, 
        set: function(newName){ 
            store.dispatch('addName',newName); 
        }
    }
} 
enter code here

또,v-model계산된 속성으로name당신의 안에서<input>태그:

<input v-model="name" />

여기 작업 중인 jsfiddle이 있습니다.

언급URL : https://stackoverflow.com/questions/44456528/how-to-bind-input-field-and-update-vuex-state-at-same-time