推送到vuex存储阵列在VueJS中不工作

我正在使用Vuex显示“store.js”中的用户列表。该js文件具有如下数组

var store=新的Vuex.store({
声明:{
顾客:[
{id:'1',name:'user 1',},
]
}
})

我想在同一数组中插入一组新值

{id:’1’,name:’user 1’,}

上述值是从URL(vue资源)获得的。下面是将获取的数据推送到阵列的代码。但是,数据不是插入的

挂载:函数(){
这是。$http.get('http://localhost/facebook-login/api/get_customers.php')
。然后(响应=&gt{
返回响应数据;
})
。然后(数据=&gt{
store.state.customers.push(数据)//不工作!!
console.log(data)//打印{id:'2',name:'User 2',}
store.state.customers.push({id:'2',name:'User 2',})
});
}

您试图从vue组件修改vuex状态,但无法执行此操作。您只能从变体修改vuex存储

您可以定义如下所示的突变:

var store=新的Vuex.store({
声明:{
顾客:[
{id:'1',name:'user 1',},
]
},
突变:{
添加客户(状态、客户){
//突变状态
state.customers.push(客户)
}
}
})

现在,您可以从vue实例提交此变异,如下所示:

挂载:函数(){
这是。$http.get('http://localhost/facebook-login/api/get_customers.php')
。然后(响应=&gt{
返回响应数据;
})
。然后(数据=&gt{
commit('addCustomer',{id:'2',name:'User 2'})
});
}

发表评论