vue项目逻辑梳理

vue 发送请求,一般使用vuex.
首先找到仓库文件 store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

import orderlist      from './store/orderlist/store.js';
export default new Vuex.Store({
  modules: {
      "ORDER_LIST":     orderlist,
      "DETAIL":         detail,
      "detailVirtual":  detailVirtual,
      "detailEvoucher": detailEvoucher
  }
})

下面看一下 ./store/orderlist/store.js 这个文件


function cancleOrder({ commit }, paramsWrapper) {
 // 发送请求
  return CommonGateWay.proxy(URL.CANCLE_ORDER, paramsWrapper);
}
const action = {
  cancleOrder
};
const state = {
   orderList: null,
    totalNum: 0,
    numPerPage: 20,
};
const mutations = {
  update_orderlist (state, vo) {
        state.orderList = [];
        state.orderList = vo;
    },
};
const getters = {
};
//千万别忘记设置命名空间
export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
}

当我们发送一个请求的时候,就写以下代码

     let params = {  //配置查询参数
                    "vue": this,
                    "params": {}
                }

                let _action = "ORDER_LIST/cancleOrder";

                this.$store.dispatch(_action, params).then(rep=>{
                     console.log("请求成功")
                     console.log(rep)
                },err=>{
                  console.log("请求失败")
                });
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本项目是本人2019年学习vue的练手项目,此文记录项目练习过程中的的一些细节和难点。(文章最后更新时间:2019...
    前端辉羽阅读 3,780评论 0 11
  • 1.起步 1.1.前言 这篇文档是跟随腾讯课堂课程:前端教程vuex实现管理系统,给自己写的课堂随笔,仅作记录作用...
    YiFanCode阅读 4,622评论 0 0
  • 创建vue项目流程 1.使用构建工具vue-cli创建项目脚手架 vue-cli是一个官方发布vue.js项目脚手...
    landry阅读 3,971评论 0 1
  • 创建vue项目流程 1.使用构建工具vue-cli创建项目脚手架 vue-cli是一个官方发布vue.js项目脚手...
    小羊同学啊阅读 81,887评论 11 90
  • 1. 逻辑思路 登录:用户提交登录信息之后,会向服务端发送请求,服务端的返回信息中会有一个token,前端将这个t...
    LazyXu阅读 5,472评论 0 1