Vuex는 액션을 디스패치할 때 2개의 요소가 상태 변경됨

Vuex는 액션을 디스패치할 때 2개의 요소가 상태 변경됨

vuex 스토어에 문제가 있습니다.vue2와 vuex2를 사용하고 있습니다.

특정 액션을 디스패치하면 스토어 내 2개 요소의 상태가 바뀝니다.이것은 설명해야 할 더미 데이터에 영향을 미치는 제 상태의 일부입니다.

  {
     "clients":[
        {
           "user":{
              "id":7,
              "name":"Luis",
              "lastName":"Cervantes",
              "lastName2":"",
              "isCompany":0,
              "razonSocial":null,
              "cif":"",
              "documentType":"NIE",
              "document":"asdasd",
              "phone":"232344455",
              "phone2":"",
              "email":"louis.cervantes@gmail.com",
              "active":0,
              "setPassword":0,
              "setEmail":1,
              "active_token":null,
              "last_login":"2016-09-08 15:57:09",
              "created_at":"2016-09-08 15:57:09",
              "updated_at":"2016-09-12 22:05:36"
           },
           "addresses":[
              {
                 "id":5,
                 "user_id":7,
                 "province":"Almería",
                 "city":"Almeria",
                 "postCode":"23000",
                 "streetType":"Calle",
                 "address":"Riudoms",
                 "number":"44",
                 "other":"",
                 "address_id":2,
                 "created_at":"2016-09-12 22:02:13",
                 "updated_at":"2016-09-12 22:05:58",
                 "default":1
              },
              {
                 "id":3,
                 "user_id":7,
                 "province":"Araba/Álava",
                 "city":"Alava",
                 "postCode":"23232",
                 "streetType":"Camino",
                 "address":"nueva",
                 "number":"2323",
                 "other":"",
                 "address_id":1,
                 "created_at":"2016-09-08 15:57:09",
                 "updated_at":"2016-09-13 17:28:30",
                 "default":0
              }
           ]
        },
        {
           "user":{
              "id":8,
              "name":"Richard",
              "lastName":"Czyrny",
              "lastName2":"",
              "isCompany":0,
              "razonSocial":null,
              "cif":"",
              "documentType":"NIE",
              "document":"x84445556V",
              "phone":"937444566",
              "phone2":"",
              "email":"omas@gmail.com",
              "active":0,
              "setPassword":0,
              "setEmail":1,
              "active_token":null,
              "last_login":"2016-09-08 15:58:07",
              "created_at":"2016-09-08 15:58:07",
              "updated_at":"2016-09-12 20:11:28"
           },
           "addresses":[
              {
                 "id":4,
                 "user_id":8,
                 "province":"Tarragona",
                 "city":"Salou",
                 "postCode":"43840",
                 "streetType":"Carretera",
                 "address":"Costa",
                 "number":"35",
                 "other":"1 2",
                 "address_id":3,
                 "created_at":"2016-09-12 21:30:46",
                 "updated_at":"2016-09-13 16:30:10",
                 "default":1
              }
           ]
        }
     ],
     "client":{
           "user":{
              "id":7,
              "name":"Luis",
              "lastName":"Cervantes",
              "lastName2":"",
              "isCompany":0,
              "razonSocial":null,
              "cif":"",
              "documentType":"NIE",
              "document":"asdasd",
              "phone":"232344455",
              "phone2":"",
              "email":"louis.cervantes@gmail.com",
              "active":0,
              "setPassword":0,
              "setEmail":1,
              "active_token":null,
              "last_login":"2016-09-08 15:57:09",
              "created_at":"2016-09-08 15:57:09",
              "updated_at":"2016-09-12 22:05:36"
           },
           "addresses":[
              {
                 "id":5,
                 "user_id":7,
                 "province":"Almería",
                 "city":"Almeria",
                 "postCode":"23000",
                 "streetType":"Calle",
                 "address":"Riudoms",
                 "number":"44",
                 "other":"",
                 "address_id":2,
                 "created_at":"2016-09-12 22:02:13",
                 "updated_at":"2016-09-12 22:05:58",
                 "default":1
              },
              {
                 "id":3,
                 "user_id":7,
                 "province":"Araba/Álava",
                 "city":"Alava",
                 "postCode":"23232",
                 "streetType":"Camino",
                 "address":"nueva",
                 "number":"2323",
                 "other":"",
                 "address_id":1,
                 "created_at":"2016-09-08 15:57:09",
                 "updated_at":"2016-09-13 17:28:30",
                 "default":0
              }
           ]
        },
  }

클라이언트 배열이 있습니다.

또한 현재 선택된 클라이언트를 포함하는 클라이언트 개체입니다.클라이언트 사용자 개체와 주소 개체를 개별적으로 변경하는 작업이 있다.

행동들

SET_CLIENT_PROFILE_USER: ({commit, state}, user) => {
  commit('CLIENT_PROFILE_USER', user)
},

SET_CLIENT_PROFILE_ADDRESSES: ({commit, state}, addresses) => {
  commit('CLIENT_PROFILE_ADDRESSES', addresses)
}

돌연변이

'CLIENT_PROFILE_USER': (state, user) => {
   state.client.user = user
 },
'CLIENT_PROFILE_ADDRESSES': (state, addresses) => {
   state.client.addresses = addresses
 }

이것은 하나의 컴포넌트 내에서 사용하고 있는 계산상의 과제입니다.

clientsList(){
  return this.$store.getters.getClients
},
client(){
  return this.clientsList[this.client_index]
},
addresses(){
  if(this.client){
    return this.client.addresses
  }else{
    return ''
  }
},
address(){
 if(this.addresses){
    return this.client.addresses[this.address_index]
  }else{
    return ''
  }
},

그리고 이건 제가 사용하는 감시자들이에요 그들은 액션을 보내요

watch: {
  'client_index': function (val, oldVal) {
    var c = this.client;
    // console.log(c)
    this.$store.dispatch('SET_CLIENT_PROFILE', c);
    this.address_index = '';
  },
  'address_index': function(val, oldVal){
    if(this.val != ''){
      var a = this.address;
      // console.log(a)
      this.$store.dispatch('SET_CLIENT_PROFILE_ADDRESSES', a);
    }
  }
 },

SET_CLIENT_PROFile_ADDRES가 디스패치되면 client.addresses 및 해당 주소에 대응하는 clients 객체의 주소가 변경됩니다.이 경우 client.addresses 부분만 변경됩니다.

나는 왜 그렇게 하는지 이유를 찾을 수 없다.

client.addresses만 변경할 수 있습니다.

개체와 배열이 값이 아닌 동일한 개체에 참조로 전달되는 것은 JavaScript 기본 동작임을 알게 되었습니다.

그리고 Lodash의 clone Deep 기능을 사용했습니다.

언급URL : https://stackoverflow.com/questions/39494818/vuex-changes-2-elements-in-state-when-dispatched-action