vuex-capsule

1.2.2 • Public • Published

vuex-capsule

依赖 Vuex2,简化 vuex 在项目中的应用编码,抽象 vuex 中常用逻辑,定义了通用的 mutations、actions、types。

安装

npm i --save vuex-capsule

准备

使用的接口规范必须按照如下结构返回,可参考接口规则

// 单个实体
{
  "success":true,
  "results":{
    "id":1,
    "name":"apple"
  }
}
// 列表数据
{
  "success":true,
  "results":{
    "items":[{"id":1,"name":"apple"}]
  }
}
// 错误时
{
  "success":false,
  "message":"error messages ..."
}

部署

因为基于 Vuex,所以需要在您的项目中导入包内预置数据

State

将预定义实体导入 state.js

import vuexCapsule from 'vuex-capsule'
export default {
  mainList: {
    ...vuexCapsule.mods.list
  }
}

实体包括

  • mods.list:列表实体

Actions

导入预定义 actions 到 action.js

import vuexCapsule from 'vuex-capsule'
import sysHttp from 'utils/http'

export default {
  ...vuexCapsule.createActions({request: sysHttp.req})
}

utils/http.js 的实现参考。具体代码可自定义实现,关键在于回调是传入的数据。

Mutations

import vuexCapsule from 'vuex-capsule'

export default {
  ...vuexCapsule.mutations

}

Types

与项目内定义的常量集合合并

import vuexCapsule from 'vuex-capsule'
let handle = Object.assign({}, vuexCapsule.types)
export default handle;

使用

预定义如下,供调用

以下示例内暴露的参数说明规则: + 必填,? 可选

Actions

dispatch(Types.A_MOD_REQUEST, {
  path:"", //+
  api:"", //+
  payload:{}, //?
  setBefore(res){ //?
    console.log(res)
    return res;
  },
  stepField:"" //?
})

dispatch(Types.A_LIST_REQUEST, {
  path:"", //+
  api:"", //+
  payload:{}, //?
  append:false, //? 列表数据是否累加
  indexFieldName:"id", //? 列表数据中唯一的“索引”字段名称
  setBefore(state,response,payload){ //?
    console.log(state,response)
    return state;
  },
  setAfter(response,payload){ //?
    console.log(response,payload)
  }
})

dispatch(Types.A_SEND_REQUEST,{
  api:"", //+
  payload:{}, //?
  back:false, //?
  redirectUrl:"", //?
  stepField:"", //?
  messageField:"", //?
  requestSuccess:(res)=>{}, //? 发送ajax后,结果成功后执行的钩子
  requestError:(err)=>{}, //? 发送ajax后,结果失败后执行的钩子
  requestBeforeActions:[
    {
      async:true,
      name:"",
      payload:null,
      callback(actionResponse,payload){}
    }
  ], //? 在标记请求开始之后,执行请求之前,需要执行 actions 队列
  requestAfterActions:[
    {
      async:true,
      name:"",
      payload:null,
      callback(actionResponse,payload){}
    }
  ], //? 在执行请求之后,callback 之前,需要执行 actions 队列
  callback:{}, //? 参看 Types.M_MOD_SET 的参数
  method:"post" //? 默认值 post,支持的类型与 http.js 提供的 method 字段一致
})

Muations

store.commit(Types.M_MOD_RESET,{
  path:"", //+
  data:{} //?
})

// 值可以是数组或对象
commit(Types.M_MOD_SET,{
  path:"a.b.items", //+
  operate:"match.set|match.del|set|push", //?
  depend:()=>{}, //? 返回 false 终止执行该任务

  // 当 operate 等于 set|push 时,如下 value 必填
  value:"", //+
  value(state,response,payload){ //?
    console.log(state,response,payload);
    return state;
  },

  // 当 operate 等于  match.set|match.del 时,以下字段必填
  matchField:"", //+
  matchValue:"", //+
  matchCallback:(matchOne, response, payload)=>{ //?
    console.log(matchOne, response, payload)
    return matchOne;
  }
});

ChangeLog

1.2.2

  • fix A_SEND_REQUEST 中的 actions resolve 没有执行

1.2.1

  • chore 升级依赖 lodash 版本至 4.17.12

1.2.0

  • feature 自定义的 action 支持 await 执行
  • fix 修复参数 requestAfterActions

1.1.1

  • mods.js 新增 createEntity 方法,用于生成默认实体结构

1.1.0

  • 删除 package.json 内 module 字段

1.0.3

  • fix M_MOD_SET 的 match.set 操作无效问题

1.0.1

  • 优化文档

1.0.0

  • 优化代码,确保流程异步执行、回调参数补全以及bug修复

0.9.0

  • 修改 package.json ,添加 files、module 字段

0.8.1

  • fix bug

0.8.0

  • A_LIST_REQUEST 新增参数:append,indexFieldName

0.7.2

  • fix mapDeep 方法

0.7.1

  • fix objAssign 方法

0.7.0

  • A_SEND_REQUEST 新增参数:requestSuccess,requestError
  • 修复 M_MOD_RESET ,当值为数组时,设置为 [], 其它设置为空字符串

0.6.0

  • M_MOD_SET 中的 matchCallback 新增参数 response

0.5.1

  • 修复 M_MOD_SET ,当值为 false 时

0.5.0

  • 新增对 path 字段有效性判断
  • 修复 method 字段

0.4.0

  • 将常量名称 A_SUBMIT_REQUEST 变更为 A_SEND_REQUEST
  • A_SEND_REQUEST 新增参数 method
  • createActions 方法接收的参数字段变更

0.3.0

  • 修复 A_SUBMIT_REQUEST 在请求错误时的处理

0.2.0

  • 新增 mods 字段,放预定义数据模型

0.1.3

  • 清理注释

0.1.2

  • fix babel 编译

0.1.1

  • 增加 babel 编译

0.1.0

  • 第一版

Readme

Keywords

Package Sidebar

Install

npm i vuex-capsule

Weekly Downloads

2

Version

1.2.2

License

MIT

Unpacked Size

59.4 kB

Total Files

16

Last publish

Collaborators

  • uojo