vuex闭环请求

首先构建环境

1. 首先项目配置环境脚手架-vue开发环境

   1. 安装node.js

   2. 下载地址：http://nodejs.org/en/download/

   3. 注意可以安装淘宝镜像

      npm install -g cnpm --registry=http://registry.npm.taobao.org
      

      4. 如果需要卸载已经安装了的旧版本的vue-cli(1.x或2.x)可以使用如下代码

      npm uninstall vue-cli -g
      

      5. vue-cli 4.0 开发环境 脚手架，vue3.0 和vue4.0使用方式是相同的
      6. 全局下载安装脚手架—只需要执行一次，今后不需要再次下载

      cnpm install -g @vue/cli
      可以使用   vue --version 查看版本
      

      7. 切换到需要创建的路径下
      8. vue create 你的项目名
      9. 选择最后一项自定义配置Manually select features并回车后，使用空格选择Router和Vuex,接着一路回车下去即可。
      10. 接着cd到项目下 npm run serve此方式是启动项目，注意如果想要更改启动的方式，可以进入 package.json文件夹下，修改"serve": "vue-cli-service serve",可以将serve修改为其他的启动方式即可。
      11. 至此配置环境已经完成。开始进行项目的编写步骤如下第2步

2. 配置vue.config.js

module.exports={
        //给文件夹起别名
    configureWebpack:{
        resolve:{
            alias:{
            // "别名":"对应的文件夹"
            "c":"@/components",
            "u":"@/util",
            "a":"@/api"
            }
        },
    },
    devServer:{
        open:true, //设置自动开启
        port:8888,//修改端口，修改完配置文件要记得重启
    
// 当需要进行跨越的时候可以设置如下的此代码

	proxy: {
            '/api': {
              target: 'http://localhost:3000/', //对应自己的接口
              changeOrigin: true,
              ws: true,
              pathRewrite: {
                '^/api': ''
              }}
             }

}
}

3. 创建文件util文件并新建文件 servicejs文件

import axios from "axios"
// 创建axios 赋值给常量service 
const service = axios.create();

// 添加请求拦截器（Interceptors）
service.interceptors.request.use(function (config) {
    // 发送请求之前做写什么
    return config;
  }, function (error) {
    // 请求错误的时候做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
  export default service

4. 新建api文件夹并且创建postapi.js

//注意此处的service不需要进行解构
import service from "@/util/service"
export function postlink(url,data){
    return new Promise((resolve,reject)=>{
        service.request({
            url,
            method:"POST",
            data
        }).then(ok=>{
            resolve(ok)
        }).catch(err=>{
            reject(err)
        })
    })
}

下载axios cnpm install --save axios
5. 写store文件–新建modules文件夹，并且新建maboult.js文件

import {postlink} from "@/api/postapi.js"
export let mabout={
    state:{

    },
    mutations:{

    },
    actions:{
        postaxios(context,payload){
            postlink("/api/ceshi/post",payload).then(ok=>{
                console.log(ok);
            })
        }
    }
}

6. 接着在store的index.js文件下进行引用使用

import Vue from 'vue'
import Vuex from 'vuex'
import {mabout} from "@/store/modules/mabout.js"
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    mabout
  }
})

7. 可以在需要调用的文件下进行使用store中的postaxios方法

<template>
  <div class="about">
    <h1>post请求接口</h1>
    <input type="text" v-model="inputval">
    <button @click="fun()">点击我发送请求</button>
  </div>
</template>
<script>
export default {
  data(){
     return {
       inputval:""
     }
  },
  methods:{
    fun(){
      let usp=new URLSearchParams
      //posttext 是后端需要的数据  this.inputval是前端穿给后端的值
      usp.append("posttext",this.inputval)
      //postaxios 是store实例中anctions的方法
      this.$store.dispatch("postaxios",usp)
    }
  }
}
</script>

此时actions方法中就会打印到后台请求到的数据

    actions:{
        postaxios(context,payload){
            postlink("/api/ceshi/post",payload).then(ok=>{
                console.log(ok);
            })
        }
    }

8. 新建文件vue文件进行布局等设置后

<template>
  <div class="about">
    <h1>post请求接口</h1>
    <input type="text" v-model="inputval">-----{{this.$store.state.mabout.text}}
    <button @click="fun()">点击我发送请求</button>

  </div>
</template>
<script>
export default {
  data(){
     return {
       inputval:""
     }
  },
  methods:{
    fun(){
      let usp=new URLSearchParams
      //posttext 是后端需要的数据  this.inputval是前端穿给后端的值
      usp.append("posttext",this.inputval)
      //postaxios 是store实例中anctions的方法
      this.$store.dispatch("postaxios",usp)
    }
  }
}
</script>

注意在调用的时候应使用的是this.$store.state.mabout.text
9. 重新设置闭环的文件 在mabout.js

import {postlink} from "@/api/postapi.js"
export let mabout={
    state:{
        text:""
    },
    mutations:{
        uptext(state,payload){
            state.text=payload
        }
    },
    actions:{
        postaxios(context,payload){
            postlink("/api/ceshi/post",payload).then(ok=>{
                console.log(ok.data.data.posttext);
                //调用commit  posttext都是后端需要的数据
                context.commit("uptext",ok.data.data.posttext)
            })
        }
    }
}