在Vuex中发送ajax请求方法 实现简单注册功能 数据传输

在Vuex中发送ajax请求方法 实现简单注册功能 数据传输

对使用mapActions做个传输记录

1、在子页面中获取到数据

<template>
  <div class="about">
    <h1>登录页面</h1>
    <input type="text" v-model="phone" placeholder="输入电话号码">
    <br>
    <input type="password" v-model="password" placeholder="输入密码">
    <br>
    <button @click="login">点击注册</button>
  </div>
</template>//v-model双向绑定，获得电话号码与密码的值
<script>
import{mapActions,mapMutations}from 'vuex';
export default {
  methods:{...mapActions(['vlogin']),//传入数据保存
  ...mapMutations(['setphone']),//引入保存phone数据方法
  login(){
     this.vlogin({
       phone:this.phone,
       password:this.password
     }).then(()=>{
       alert("注册成功！")
       this.setphone(this.phone);//如果注册成功，将电话号码传输给store仓库
       },(msg=>{
        alert(`注册失败:${msg}`)})
     )
  }},
  data(){
    return{
      phone:'',
      password:''
    }
  },
}
</script>

2、在store中的index.js页面

import Vue from 'vue'
import Vuex from 'vuex'
import axios from "axios"

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    phone:"",
  },
  mutations: {
    setphone(state,phone){
      state.phone=phone
    },//要在子页面引入，将数据保存到state中
  },
  actions: {
    vlogin(context,form){
      console.log(form)
      return new Promise((resolve,reject)=>{//Promise异步任务执行 抛出错误
        axios.post(//axios的基本操作
          "/user/reg",
          `phone=${form.phone}&password=${form.password}`
        ).then(result=>{
          console.log(result)
          if(result.status>=200 && result.status<300){
            resolve();//抛出正确
          }else{
            reject(result.data);//抛出错误
          }
        })
      })
    }
  },
  modules: {
  }
})

3、在另一个页面中显示内容

<template>
  <div class="home">
    <h1>{{phone}}</h1>
  </div>
</template>
<script>
import{mapState}from "vuex";
export default {
  
  computed:{
    ...mapState(["phone"])//获取到phone的内容
  }
}
</script>

4、我使用vue脚手架自带的http-proxy代理跨域的方法

在根目录中创建vue.config.js文件修改配置

module.exports = {
    devServer: { //再配置一个代理程序: 
      proxy: {
        '/': {
          target: `http://127.0.0.1:8080`,
          changeOrigin: true,
        } 
      }
    }
  }

5、配置完记得重启项目

关于mapState与mapMutations在另一篇文章有记录
https://blog.csdn.net/limmt2020/article/details/120004852