Javascript Vuex在调度操作时更改2个元素的状态
我的vuex商店有问题。我正在使用vue2和vuex2 当我分派某个动作时,它会改变我存储中2个元素的状态。 这是我的状态的一部分,它影响一些虚拟数据来解释:Javascript Vuex在调度操作时更改2个元素的状态,javascript,vue.js,vuex,Javascript,Vue.js,Vuex,我的vuex商店有问题。我正在使用vue2和vuex2 当我分派某个动作时,它会改变我存储中2个元素的状态。 这是我的状态的一部分,它影响一些虚拟数据来解释: { "clients":[ { "user":{ "id":7, "name":"Luis", "lastName":"Cervantes", "lastName2":"",
{
"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
}
]
},
}
存在客户端阵列
和客户端包含当前选定客户端的对象。
我可以分别更改客户端用户对象和地址对象
行动
突变
这是我在一个组件中使用的一些计算百分比
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\u CLIENT\u PROFILE\u ADDRESSES被分派时,会更改CLIENT.addreses和与该地址对应的clients对象中的地址。
它应该只更改客户端地址部分
我找不到它这样做的理由
我只想更改client.adress我发现JavaScript的默认行为是通过引用同一个对象而不是通过值传递对象和数组 我使用了Lodash的cloneDeep函数
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);
}
}
},