Skip to content

Latest commit

 

History

History
336 lines (236 loc) · 6.82 KB

README.md

File metadata and controls

336 lines (236 loc) · 6.82 KB
Raw

super-vuex

一套用于简化Vuex的数据架构，使开发者能够摈弃繁琐的书写，减少代码量，便于维护。此框架主要解决的问题是我们在日常开发中Vuex被诟病的书写和理念，基本使开发者只需关心数据的定义即可，对于对象和数组的操作能够通过this.$store[${namespace}][$action]的模式快速调用。

Install

npm i super-vuex

安装完毕后，此模块已包含最新的vue与vuex，开发者可以直接引用。

Core

它的核心主要是两部分：

  1. SuperVuex 核心，用于创建实例。
  2. ChildVuex 模块，用于对单独的业务逻辑进行模块化。

SuperVuex也是继承自ChildVuex，所以它也具备ChildVuex的所有方法与属性。

SuperVuex

初始化：

import { SuperVuex } from 'super-vuex';
const Main = new SuperVuex('NameSpace');

SuperVuex实例只有一个参数，那就是命名空间，但是我们也可以省略，如果被省略，默认命名空间是Gloabl。

[SuperVuex].setModule

装载一个业务逻辑模块

模块必须继承自ChildVuex, 否则无法装载上。

import UserStore from './store/user';
import CompanyStore from './store/company';
Main.setModule(UserStore, CompanyStore, ...);

[SuperVuex].setPlugin

增加额外的插件供使用，插件也是纯Vuex支持的插件。

Main.setPlugin(MyPlugin_1, Myplugin_2, ...);

[SuperVuex].init

用于初始化整个数据结构，同时返回纯原生的new Vuex.Store对象。可以在Vue文件中直接使用该返回对象。

export default Main.init();

[SuperVuex].registerModule

动态注册模块

Main.registerModule(A, B, C, ...);

[SuperVuex].unregisterModule

解注模块

Main.unregisterModule('abc', 'def', ...);

ChildVuex

主要用于业务逻辑数据模块化。它与SuperVuex相似，只有一个参数即命名空间。

import { ChildVuex } from "super-vuex";
const child = new ChildVuex('user');
export default child;

[ChildVuex].value

  • getter:value 获取整个Vuex初始化配置参数。一般不需要用到这个属性（由系统自动调用）。
  • setter:value 定义整个模块的数据初始化内容。
child.value = {
  name: 'evio',
  age: 18,
  students: [
    {
      name: 'yixianle',
      age: 10
    }
  ],
  load: {
    allow: true,
    data: {},
    total: 100
  }
}

你也可以通过setState方法来设置一个数据树

child.setState({
  name: 'evio',
  age: 18
})

其实.value是setState的变型而已。

ChildVuex data path

数据路径，在之后的所有方法中，数据路径至关重要，它是一个数据的直观路径字符串，也就是上面[ChildVuex].value 数据定义的数据路径。

比如我们需要获取allow的路径：

'load.allow'

ChildVuex只对Object类型进行深度路径处理，一旦遇到非object类型，路径就停止跟踪。数组虽然属于object类型，但是它在这里也是停止跟踪的。比如

'students'

[ChildVuex].setGetter

自定义Getter属性，相当于Vuex中的getter。

覆盖式：

child.setGetter('load.total', state => {
    return state.load.total + 100;
});

当我们调用这个getter的时候，值默认就是200。

自定义：

child.setGetter('demo.getter.self', state => {
    return state.load.total + 200;
});

[ChildVuex].setCommit

对于一般数据对象的值覆盖行为，相当于Vuex中的commit

覆盖式：

child.setCommit('load.data', (state, data) => {
    state.load.data = Object.assign(state.load.data, data);
});

自定义：

child.setCommit('demo.set.commit', (state, data) => {
    state.load.total = state.load.total + state.age + data;
});

[ChildVuex].set{ArrayAction}Commit

如果我们对一个数组进行操作的话，我们有非常简便的方法。

  • [ChildVuex].setPushCommit 数组的push操作行为
  • [ChildVuex].setUnShiftCommit 数组的unshift操作行为
  • [ChildVuex].setSpliceCommit 数组的splice操作行为
  • [ChildVuex].setPopCommit 数组的pop操作行为
  • [ChildVuex].setShiftCommit 数组的shift操作行为
child.setPushCommit(path, callback<(state, data)>);
child.setUnShiftCommit(path, callback<(state, data)>);

// 注意splice使用方法，在`data`中是一个数组
child.setSpliceCommit(path, callback<(state, data)>);

child.setPopCommit(path);
child.setShiftCommit(path);

[ChildVuex].setAction

设定Vuex的自定义行为，由dispatch触发。

child.setAction('load.data.fetch', async () => {
  const res = await axios.get('https://registry.npm.taobao.org/');
  child.commit('load.data', res.data);
});

[ChildVuex].get

获取一个Getter属性

child.get('demo.getter.self');

[ChildVuex].commit

提交处理一个数据

child.commit('load.data', 1000);
child.commit('demo.set.commit', 2000);

[ChildVuex].push

提交一个数据 push行为

const data = [
  {
     name: 'dafa',
     age: 22
  },
  {
    name: 'dsfetree',
    age: 34
  }
]
child.push('students', ...data);

[ChildVuex].pop

删除最后一个数据 pop行为

child.pop('students');

[ChildVuex].unshift

提交一个数据 unshift行为

const data = [
  {
     name: 'dafa',
     age: 22
  },
  {
    name: 'dsfetree',
    age: 34
  }
]
child.unshift('students', ...data);

[ChildVuex].shift

删除最前一个数据 shift行为

child.shift('students');

[ChildVuex].splice

删除或者替换一个数据

child.splice('students', 0, 1);
child.splice('students', 0, 1, {
  name: 'tttt',
  age: 21
})

[ChildVuex].dispatch

它是一个async/await型的调用函数。与Vuex中的dispatch一致，用于出发setAction定义的行为。

await child.disptach('load.data.fetch', ...data);

Use in vue

在Vue中我们可以简单使用，与Vuex的store使用完全不冲突。

import store from './store';
export default {
  store: store,
  name: "index",
  ...
}

调用模式有些许区别：

this.$store.user.commit('name', 'someone');
this.$store.user.commit('load.allow', false);
this.$store.user.splice('students', 0, 1);
this.$store.user.dispatch('load.data');
this.$store.user.push('students', {
  name: 'huaping',
  age: 300
});
this.$store.user.unshift('students', {
  name: 'huaping1',
  age: 302
});

最后

非常感谢大家看完文档，如果遇到什么问题，请提交给我。我也很乐意大家给我提PR.