v-for의 경우 v-model 입력에서 Vuex 저장소를 업데이트하는 방법

v-for의 경우 v-model 입력에서 Vuex 저장소를 업데이트하는 방법

10개의 사물을 배열해서 말하면policies = [{name:'a',text:''},{name:'b',text:''},....]

v-for를 사용하여 텍스트 속성이 v-model로 바인딩된 레이블 A: 입력 상자를 표시하기 위해 반복됩니다.v-model에서 정책 텍스트가 변경될 때마다 변환을 트리거하려고 합니다.

여기 바이올린 링크가 있습니다.https://jsfiddle.net/dmf2crzL/41/

사용하시는 것으로 상정하고 있습니다.v-model잠깐 동안2-way와 함께 구속되는.Vuex가게.

문제는 Vuex 스토어를 strict 모드로 하는 것입니다.

const store = new Vuex.Store({
  // ...
  strict: true
})

따라서 모든 변환은 Vuex 스토어를 통과해야 하며 Vue.js devtools에서 확인할 수 있습니다.

방법 1: 복제된 개체를 사용하여 Vuex 오류를 방지하고 워처를 사용하여 변환을 커밋할 수 있습니다.

const store = new Vuex.Store({
  strict: true,
  state: {
    formdata: [
      { label: 'A', text: 'some text' },
      { label: 'B', text: 'some other text' },
      { label: 'C', text: ' this is a text' }
    ]
  },
  mutations: {
    updateForm: function (state, form) {
      var index = state.formdata.findIndex(d=> d.label === form.label);
      Object.assign(state.formdata[index], form);
    }
  }
});
    
new Vue({
  el: '#app',
  store: store,
  data () {
    return {
      //deep clone object
      formdata: JSON.parse(JSON.stringify(this.$store.state.formdata))
    };
  },
  computed: {
    formdata() {
      return this.$store.state.formdata
    }
  },
  watch: {
    formdata: function(form)
      this.$store.commit('updateForm', form);
    }
  }
})

방법 2: vuex 문서에 따라 계산된 get/set을 사용하여 변환을 커밋할 수 있습니다.

computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

내가 유용하다고 생각한 또 다른 방법:

1. v-model을 (v-on) 기능으로 교체
2. 그 함수는 돌연변이를 유발한다.
3. 변환("스토어 내 함수")이 상태 값을 변경합니다.
4. getter("스토어 내")는 속성 값의 변경에 따라 "수정"되고 그에 따라 변경됩니다.

다음 예에서는 v-model 대신 Vuex를 사용하여 카드를 필터링하는 방법을 보여 줍니다.

함수 "updateFilter"를 트리거하는 입력:

    <input type="text" placeholder="filter" v-on:input='updateFilter'>

변환(커밋)을 트리거하는 함수(커밋):

  methods: {
updateFilter(event){
  this.$store.commit('updateFilter', event.target.value);
}

데이터(상태)를 변경하는 변환인 store.module:

mutations: {
    updateFilter (state, filter) {
        state.filter = filter; 
    },

상태:

state: {filter: ""}

상태 변화에 "적합"하는 getter(유도자)가 있습니다.

getters: {
    filteredGames: state => {
        //your filter code here
          return filtered;
        })
    }, 

마지막으로 필터링해야 할 컴포넌트는 다음과 같이 계산됩니다(게터).

  computed: {
filtered() {
  return this.$store.getters.filteredGames;
}

Mine 라이브러리 vuex-dot은 vuex 스토어에서 반응성(및 v-model) 사용을 단순화합니다.

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

<template>
  <form>
    <input v-model="name"/>
    <input v-model="email"/>
  </form>
</template>

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

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

언급URL : https://stackoverflow.com/questions/48519201/how-to-update-vuex-store-from-v-model-input-in-case-of-v-for