Vuex를 통한 양방향 데이터 바인딩

Vuex를 통한 양방향 데이터 바인딩

아래 코드에서는 텍스트 영역의 출력을 p 요소로 양방향 바인딩합니다.하나는 컴포넌트의 내부 상태에서, 다른 하나는 Vuex에서.Vuex 상태에는 초기값이 표시되지만 텍스트를 추가하거나 삭제해도 값이 업데이트되지 않습니다(내부 데이터에 바인딩된 첫 번째 텍스트 영역과 마찬가지로 올바르게 업데이트되지 않습니다.이 문제의 원인은 무엇입니까?

컴포넌트 코드:

<template>
  <div>
    <div>
      <textarea name="textarea1" id="txtid" cols="40" rows="30" v-model="internal_state"></textarea>
      <p> {{ internal_state }}</p>
      <hr>

      <textarea name="textarea1" id="txtid" cols="40" rows="30" v-model="this.$store.state.vuex_state"></textarea>
      <p> {{ this.$store.state.vuex_state }}</p>
      <hr>

    </div>
  </div>
</template>

<script>

  export default {
    name: 'WriteArea',
    data () {
      return {
        internal_state: ''
      }
    },
    methods: {


    }
  }

</script>

Vuex 코드:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
  strict: true,
  state: {
    counter: 0,
    vuex_state: 'starting string'
  },
  getters: {
    vuex_getter1: (state) => {
      return state.vuex_string
    }
  }
})

Vuex 상태는 변환을 통해 업데이트해야 합니다.이 문제에 대해서는, 메뉴얼을 참조해 주세요.해결책은 v-model을 사용하는 것이 아니라 v-model을 사용하여:value의textarea입력 시 Vuex 상태를 변환하는 커스텀이벤트를 만듭니다.https://vuex.vuejs.org/en/forms.html

<input :value="message" @input="updateMessage">
// ...
computed: {
  ...mapState({
    message: state => state.obj.message
  })
},
methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
  }
}

다른 옵션은 동일한 계산 속성에 setter와 getter를 작성하는 것입니다.

<input v-model="message">
// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

쌍방향 바인딩 vuex 문제 해결을 위해 마이닝 라이브러리를 사용할 수 있습니다.

https://github.com/yarsky-tgz/vuex-dot

예:

<template>
  <input v-model="name"/>
  <input v-model="email"/>
  <button @click.stop="step++">next</button>
</template>

<script>
  import { takeState } from 'vuex-dot';

  export default {
    computed: {
      step: takeState('wizard.step') 
        .commit('setWizardStep')
        .map(),
      ...takeState('user')
        .expose(['name', 'email'])
        .commit('editUser')
        .map()
    }
  }
</script>

store/index.displaces

export default new Vuex.Store({
  state: {
    wizard: {
      step: 1
    },
    user: {
      name: 'John',
      email: 'john@doe.com'
    }
  },
  mutations: {
    setWizardStep(state, step) {
      state.wizard.step = step;
    },
    editUser(state, patch) {
      state.user = Object.assign({}, state.user, patch);
    }
  }
});

사용방법: vuex-map-fields

from vuex-map-fields repo:

Vuex 저장소에 저장된 양식 필드에 대해 양방향 데이터 바인딩을 사용하도록 설정합니다.

Vuex 스토어

import Vue from 'vue'
import Vuex from 'vuex'
import { getField, updateField } from 'vuex-map-fields';

Vue.use(Vuex)

export const store = new Vuex.Store({
  strict: true,
  state: {
    counter: 0,
    vuex_state: 'starting string'
  },
  getters: {
    getField, //  Add the `getField` getter to the `getters` of your Vuex store.
    vuex_getter1: (state) => {
      return state.vuex_string
    }
  }

  mutations: {
    updateField,  // Add the `getField` getter to the `getters` of your Vuex store.
  }
})

컴포넌트 코드:

<template>
  <div>
    <div>
      <textarea name="textarea1" id="txtid" cols="40" rows="30" v-model="internal_state"></textarea>
      <p> {{ internal_state }}</p>
      <hr>

      <textarea name="textarea1" id="txtid" cols="40" rows="30" v-model="vuex_state"></textarea>
      <p> {{ vuex_state }}</p>
      <hr>

    </div>
  </div>
</template>

<script>
import { mapFields } from 'vuex-map-fields';

export default {
  name: 'WriteArea',
  data () {
    return {
      internal_state: ''
    }
  }, 
  computed: {
    // The `mapFields` function takes an array of
    // field names and generates corresponding
    // computed properties with getter and setter
    // functions for accessing the Vuex store.
    ...mapFields([
      'vuex_state ',
    ]),
  },
}

</script>

언급URL : https://stackoverflow.com/questions/44913187/2-way-data-binding-with-vuex