JSPM – vx-refactor@1.0.5

Package Exports

vx-refactor
vx-refactor/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vx-refactor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vx-refactor 由来

命名:

vx 为vuex的读音缩写。refactor 意为重构。整合起来，就是对原生vuex的重构。

解决的问题:

注入方式	调用方式
原生 vuex 需大量注入模块	原生 vuex 调用 action & mutation 需配合 dispatch & commit 等方法
vx-refactor 只需调用 connect 方法便可自动注入	vx-refactor 面向对象调用。如：models.setFn[调用的方法]

安装
$ npm install vx-refactor or yarn add vx-refactor；

使用方法

示例代码的目录如下：

├── index.scss ├── index.vue └── model.js

1. 在 main.js 中注入 store 实例。

import vxRefactor from "vx-refactor";

vxRefactor(store);

2. 在业务 model 中用 connect 方法进行改造。

import { connect } from "vx-refactor";

export const ns = "namespace";
const state = {
  count: 0,
};

const mutations = {
  addCount(state, payload) {
    state.count = payload;
  },
};

const actions = {
  setCount({ commit }, params) {
    commit("addCount", params);
  },
};

const getters = {
  getCount(state) {
    return state.count;
  },
};

export default connect({
  ns,
  state,
  mutations,
  actions,
  getters,
});

3. 在业务页面中调用。

import models, {ns} from './model'; // 引入当前业务所在的model

 computed: {
    ...mapState(ns, ['count'])
 },

 methods: {
    introduce() {
      // 支持选传第二个参数options。允许在命名空间模块里分发根的 action
      models.setCount(2) || models.setCount(2, {root: true});
      models.commit.addCount(3）|| models.commit.addCount(3, {root: true});
    }
 }

写在最后：

使用vuex，在模块注入及调用上需要遵守vuex约定的方式。eg：this.$store.commit or this.$store.dispatch。而vx-refactor只关注模块中的方法，直接采用内置暴露对象models进行调用。eg: models.setFn。vx-refactor中connect方法实现了真正的按需引入。换句话说：不论你的model层写在何处，只要你调用connect方法对你的model进行处理。那么它将自动引入到store中进行管理。且对于命名空间需手动开启namespaced: true 引入时需再次为模块的具名。而vx-refactor只需在模块中export一个空间名称即可实现全局或私有模块的识别并支持分别调用。使其实现真正意义上的“模块化”。

vx-refactor

Package Exports

Readme

vx-refactor 由来

安装

使用方法