命名:
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.js1. 在 main.js 中注入 store 实例。
```javascript import vxRefactor from "vx-refactor"; vxRefactor(store); ```2. 在业务 model 中用 connect 方法进行改造。
```javascript 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. 在业务页面中调用。
```javascript 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一个空间名称即可实现全局或私有模块的识别并支持分别调用。使其实现真正意义上的“模块化”。
--- _Source: https://npm.io/package/vx-refactor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._