vue项目中vuex简单应用

代码如下：

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，完成这一过程的操作。

囿于自身水平，望各位指正。