vuex的理解与使用

76 阅读1分钟

dispatch 派发一个任务函数 ======》 this.$store('文件名/函数名',{数据})

然后该函数会在actions里边执行 函数名({commit},数据){ 发请求 (数据)}

再然后在该函数中提交 修改数据的函数和数据 commit('函数名',数据)

最后在mutations中修改数据,将数据存到仓库中 函数名(state,数据){ state.数据名 = 数据名; }

===============================================

先建立小仓库 仓库里面有 state{} actions{} getters{} mutations{} computed{} 暴露出去,getters相当于计算属性

再在大仓库中引入 再把大仓库暴露出去 页面调用仓库的时候就可以直接this.$store.dispatch

先在页面里面调用仓库在适当的时机派发任务函数

this.$store.dispacth("actions的方法名‘,参数)

或者 this.$store.commit("mutations的方法名",参数)

然后在小仓库里面的actions写函数 函数名要一致

例如

async getCategory2List({state,commit,dispatch}){

const result = await reqC2List(state.idfo.c1Id);

console.log(result);

if(result.code == 200){

commit("GETCATEGORY2LIST",result.data)

}

}

commit 到mutations里面写函数 注意函数名要一致

例如

GETCATEGORY1LIST(state,category1List){

state.c1List = category1List;

},

最后回到页面通过 ...mapstate把仓库里面的state的数据映射出来

例如

...mapState({

c1List: state => state.category.c1List

})

最后就可以在页面上使用渲染了