例,登录接口存储后台返回的数据
1,定义登录接口函数
在这里插入图片描述
2,在vuex的actions中定义函数
在这里插入图片描述

import { login } from "../../api/login"
const actions = {
  getLogin({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
       console.log(response)
       commit('SET_USER', response)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },
};

3,在登录页面中调用actions中的方法

在这里插入图片描述

this.$store.dispatch函数的第一个参数是actions中函数名 第二个参数是需要传入的数据
这里Login/getLogin 是因为我的代码将vuex模块化封装后,store/modules/Login.js的actions里面的getLogin函数
 this.$store.dispatch('Login/getLogin', this.ruleForm).then(res=>{
           this.$router.push("/layout");
              this.loading = false;
          });

这样就可以存入数据了
获取数据可以去另一个页面

import { mapState, mapGetters, mapActions } from "vuex";

computed: {
    ...mapGetters(["userList"])
  },
  created() {
    console.log(this.userList);
  },
Logo

前往低代码交流专区

更多推荐