vuex如何将数据存入store

问题描述

刚开始使用vue写功能,loginStore中的data为空,我想的就是可不可以将api.js中的userdata存入store中!

相关代码

loginStore.js

import {
  login
} from "../Services/api.js";
import {
  to
} from "await-to-js";
import {
  resolve
} from "path";
export default {
  state: {
    username: 'admin',
    password: '123456',
    userdata: ''
  },
  mutations: {
    ADD_LOGIN_USER_INFO(
      state, data
    ) { //存入sessionStorage
      sessionStorage.setItem("userdata", JSON.stringify(data)); 
      state.userdata = data;
    },
  },
  actions: {
    async login({
      state,
      commit,
    }) {//登录方法
      let data = await to(
        login.handleLogin({
          userCode: state.username,
          userPassword: state.password
        })
      );
      if (state.username == null || state.username == "" || state.username.replace(/(^\s*)|(\s*$)/g, "") == "") {
        alert("输入的账号为空!");
        return;
      } else if (state.password == null || state.password == "" || state.password.replace(/(^\s*)|(\s*$)/g, "") == "") {
        alert("输入的密码为空!");
        return;
      }
      //表单验证,如果为空或者输入空格就直接return,不将数据传入后台
      console.log(JSON.stringify(data));
      commit("ADD_LOGIN_USER_INFO", data); 
    }
  },
  getters: {

  }
}

loginStore这里的data 打出来是[null,null]

api.js

import axios from "axios";
import Qs from "qs";
import store from "../store/loginStore"
let  userdata;
export  const login = {
  //管理员登录
  async handleLogin() {
    let postData = Qs.stringify({
      userCode: store.state.username,
      userPassword: store.state.password
    });
    return axios({
      method: 'post',
      url: '/login/loginVerify',
      data: postData
    }).then((res) => {
      if (res.data.code == 1) {
        userdata = res.data.result;
        console.log(userdata) //输出的返回的结果
        alert("登录成功!")
      } else {
        alert("登录失败!")
        return;
      }
    }).catch(function (error) {
      console.log(error);
    });
  },
}

结果

我想的是data中就有值了,不用在api.js这个搞userdata了

阅读 9.7k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题