vuex 简单使用
木头小屋 人气:0
3. 初始化地址列表：
export default new Vuex.Store({
state:{
lists:null,
},
mutations:{
// init 第一个参数就是 store.state, 第二个是 store.commit 传入的额外参数，这里就是actions.getLists 里 commit 里的
init(state,lists){
//只能在 mutation 修改 state
state.lists = lists
}
},
actions:{
// {commit} 解构 context对象，context与store实例具有相同的属性和方法。这里commit 就是 store.commit
getLists({commit}){
// _address：封装有关地址请求的接口
_address.getAllList().then((lists)=>{
// commit 触发 mutation 改变 lists
commit("init",lists)
})
}
}
})
组件内使用：
created(){
this.$store.dispatch("getLists")
},
// 一般都在 computed 获取 state 和 getters
computed:{
lists(){
return this.$store.state.lists
}
},
4.修改
export default new Vuex.Store({
state:{
lists:null,
},
mutations:{
init(state,lists){...},
// 对象解构
update(state,{id,list}){
let index = state.lists.findIndex(item=>{
return item.id === id
})
state.lists.splice(index,1,list)
}
},
actions:{
getLists({commit}){...},
// 第一个参数为context对象，第二个为dispatch传递进来的对象，需要解构
updateLists({commit},{id,list}){
_addres.upate(id,list){
commit("update",{id,list})
}
}
}
})
组件使用：
this.$store.dispatch("updateLists",{id,list})
加载全部内容