Vuex의 개체 어레이에 v-bind 사용

Vuex의 개체 어레이에 v-bind 사용

내 vuex 저장소의 양식에서 상태로 사용자 입력을 바인딩하려고 한다.

국가는 다음과 같이 보인다.

customers: [
  {firstName: "", lastName: "", age: ""},
  {firstName: "", lastName: "", age: ""},
  {firstName: "", lastName: "", age: ""}
]

get and set method를 호출하는 계산된 속성에 v-model을 사용하려고 했다.나는 여기서 설명을 찾았다.

이것은 어떤 물체에 완벽하게 작용하지만 불행히도 이것을 어떻게 여러 물체에 사용하는지에 대한 설명은 없다.

이런 걸 찾고 있는데

computed: {
  firstName: {
    get () {
      return this.$store.state.customers[i].firstName
    },
    set (value) {
      this.$store.commit('changeFirstname', {value, index})
    }
  }
}

하지만 분명히 이것은 작동하지 않았다. 왜냐하면 나는 계산된 속성에 지수를 전달할 수 없기 때문이다.이걸 해결할 방법이 있는 사람 있어?이것은 심층 감시자에게 좋은 활용 사례인가?

첫 번째 질문인데, 혹시 잊어버린 게 있거나 잘못한 게 있으면 말해줘. 그래야 내가 질문을 더 잘 할 수 있으니까.고마워!

데이터가 평탄하지 않을 경우 Vuex는 약간의 문제가 될 수 있다.자세한 내용은 https://forum.vuejs.org/t/vuex-best-practices-for-complex-objects/10143을 참조하십시오.

네가 접근하는 한 가지 방법은 도랑이야v-model사용하다:value그리고@input 무슨 있는지나는 내 예에서 가게를 시뮬레이션 해 보았지만, 무슨 일이 일어나고 있는지 분명하기를 바란다.만약 당신이 물건 자체를 돌아다니는 것보다 그것이 더 쉽다면 당신은 쉽게 고객의 지수를 잡을 수 있다.

const storeCustomers = Vue.observable([
  {firstName: "A", lastName: "", age: ""},
  {firstName: "B", lastName: "", age: ""},
  {firstName: "C", lastName: "", age: ""}
])

function storeGetCustomers () {
  return storeCustomers
}

function storeUpdateCustomerFirstName (customer, value) {
  customer.firstName = value
}

new Vue({
  el: '#app',
  
  computed: {
    customers () {
      return storeGetCustomers()
    }
  },
  
  methods: {
    onFirstNameInput (customer, value) {
      storeUpdateCustomerFirstName(customer, value)
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <div v-for="customer in customers">
    <input :value="customer.firstName" @input="onFirstNameInput(customer, $event.target.value)">
  </div>
  <p>
    {{ customers }}
  </p>
</div>

다음 사항을 유지하는 대안v-model각각의 고객을 붙잡기 위해 별도의 구성요소를 도입하는 것이다.일반적으로 사용 시v-for편집과 관련된 모든 것은 새로운 요소를 도입하는 것을 고려해 볼 가치가 있다.

이 예에서는 고객이 부모에 있는 상점에서 읽고 아이에 있는 상점에 글을 쓴다는 점에서 비대칭성이 있다.나는 그것이 조금 불편하다고 생각한다.아마도 각 고객이 ID를 가지고 있다면, 그 ID는 고객 대상 대신 소품으로 아이에게 전달되어 아이가 관심 있는 개별 고객을 얻고 설정할 수 있을 것이다.

const storeCustomers = Vue.observable([
  {firstName: "A", lastName: "", age: ""},
  {firstName: "B", lastName: "", age: ""},
  {firstName: "C", lastName: "", age: ""}
])

function storeGetCustomers () {
  return storeCustomers
}

function storeUpdateCustomerFirstName (customer, value) {
  customer.firstName = value
}

const child = {
  props: ['customer'],
  
  template: `
    <div>
      <input v-model="firstName">
    </div>
  `,
  
  computed: {
    firstName: {
      get () {
        return this.customer.firstName
      },
      
      set (value) {
        storeUpdateCustomerFirstName(this.customer, value)
      }
    }
  }
}

new Vue({
  el: '#app',
  
  components: {
    child
  },
  
  computed: {
    customers () {
      return storeGetCustomers()
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <child v-for="customer in customers" :customer="customer"></child>
  <p>
    {{ customers }}
  </p>
</div>

심층 관찰자에 대한 당신의 질문에 대해, 나는 당신이 설명하고 있는 것은 가게 밖의 상태를 돌연변이로 만든 다음, 그 사실을 가게에게 알리도록 하는 것이라고 믿는다.주(州)가 이미 바뀌었을 것이기 때문에 실제로 가게가 할 일은 없을 것이다.분명히 이것은 가게의 내부 상태만을 변이시키는 것에 대한 '규칙'을 위반할 것이다.mutations.

참조URL: https://stackoverflow.com/questions/56841694/use-v-bind-on-array-of-objects-in-vuex