这里直接上demo

在 demo.vue中
...
{{listData.name}}
...
...
export default{
...
computed:{
listDatas(){
listDatas(){ return this.$store.state.listDatas; }
}
},
methods:{
toStore(listDatas){
this.$store.dispatch('TOSTORE',{listDatas:listDatas});//这里是分发到actions里面,注意参数传递
}//这里的$store要先挂载到入口main.js
},
created(){
   this.$http.get('/api/list').then((response)=>{
     response=response.body;
      let listDatas=response.data.listData;
     this.toStore(listDatas);
    })
  }
...
}
...
//在actions.js文件中
export const TOSTORE =({commit,state},obj)=>{//注意参数的传递
  commit('TOSTORE',{obj});
}
//在store.js中
...
const mutations = {
["TOSTORE"](state,{obj}){
state.listDatas=obj.listDatas;
}
}
...
<------------------------divide line---------------------------------->
因为时间的问题,这里不展开代码来具体讲解
在后期会进行一个详细的vuex的各个文件的讲解
。,。
周一愉快
Logo

前往低代码交流专区

更多推荐