vx-refactor

• 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一个空间名称即可实现全局或私有模块的识别并支持分别调用。使其实现真正意义上的“模块化”。