代码如下:
vue部分
created(){
var res=this.getInfo()
console.log(res);
},
methods: {
...mapActions(['getInfo']),
},
store部分
首先要想得到数据,相当于赋值给state,那首先想到的是mutations修改state,但是请求的接口都是axios异步,(如果在mutations中写异步,也能够调成功,但是由于是异步的,不能被调试工具追踪到,所有不推荐这样写。不利于调试,这是官方的约定。)故而用actions,通过actions来操作mutations从而操作state。
actions: {
async getInfo(context) {
//context可以理解为它是整个Store的对象.
//他里面包含了state,getter,mutations,actions
const res = await axios.get("/接口url");
//相当于 this.$store.commit,第一个参数是方法名,第二个参数是要传入的数据
commit("setInfo", res);
//actions也可以调用自己的其他方法
context.dispatch("getToken");
},
async getToken({ commit }) {
var res = await axios.get("/接口url");
commit("setInfo", res);
},
},
getInfo的参数也可以用解构使用:
async getInfo({ dispatch }) {
const res = await axios.get("/接口url");
commit("setInfo", res);
dispatch("getToken");
},
运行过程,调用getInfo方法以后,进入actions,然后通过commit调用setInfo,将res(用户信息)作为参数传入传入进去,并将相对应的属性值赋值给state,完成这一过程的操作。
囿于自身水平,望各位指正。