mfox

介绍

mfox，前端数据处理模块

详细说明

store 以 sessionStorage 和 localStorage 为数据库来使用，操作类似 vuex（目前支持原生 javascript\jQuery\vue2\vue3）。

具备一部分 vuex 的功能（state\mutations\getters\actions...）。

每一个模块都是独立的，并可新增、克隆、切换、增删改查，在操作 state 同时更新 store 的数据。

增加 service worker 的操作。

详细 DEMO

查看index.html

发行说明

Latest version:

兼容控制

如果你得使用的浏览器不支持 promise (比如 IE)，就在 head 中引入：

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js">
</script>

或

npm install es6-promise --save

import 'es6-promise/auto'

详细使用方法

安装

使用方法：

npm i mfo-store

import { createStore, Store } from "mfo-store/mfox.window";
import { install } from "mfo-store/mfox.vue";

或

<script src="./lib/js/mfox.window.js"></script>

const {createStore, Store, loadModule, createSWStore, use} = mfox;

原生 javascript 使用方法

//模块文件
moduleConfig("depend01", () => {
    return { ... }
})

//引入模块文件
loadModule(['depend01'], { //加载模块配置文件
    base:"/",
    ext:".js"
}).then(res => {
    ...
})

/* createStore创建store, modules可创建多个模块，registerModule注册模块，
   并可以使用switchModule切换当前使用的模块，currentModule设置当前默认模块名

   或可以使用 const store = new mfox.Store({ ... }); 创建store
*/

const store = createStore({
    currentModule:'demo',
    staging: true, //true, 使用sessionStorage, false, 使用localStorage
    strict: true, //true, 严格模式
    modules:{
        demo:{
            namespaced: true, //开启命名空间，demo/state/a = 1
            state: {
                a:1
            },
            actions: {
                getState(store){
                    return store.state.a
                },
                setState(store, v){
                    store.commit('setState', v)
                }
            },
            mutations: {
                setState(state, v){
                    this.setState('a', this.computed('addUp') + v)

        /* setState为目标a，赋值，不推荐 state.a = 1 这种方式，本地存储不会更新 */

                }
            },
            getters: {
                addUp(state){
                    return state.a + 1
                }
            }
        },
        demo2:{ ... }
    }
);
/* mapState, mapActions, mapMutations, mapGetters 输出需要对应项 */

let res = store.mapState(['a'])
console.log(res.a) //1
res = store.query('bbb') //查找当前模块中，符合条件的state数据，并返回结果数组
console.log(res) //[{...}]

/* dispath调用actions中的方法，返回promise，
   commit调用mutations的方法，返回promise,
   computed调用getters的方法，返回执行结果 */

store.dispatch('getState').then(res => console.log(res)) //1
store.dispatch('setState', 2) //state.a = 4

store.registerModule('demo3', { ... }) //注册模块
/* store.unregisterModule('demo3') 卸载注册的store module */

store.switchModule('demo2') //切换模块
store.hotUpdate({ //热更模块配置
    modules:{
        demo3:{...}
    }
})

/* 克隆模块，true克隆模块数据，false或不传此参数不克隆数据 */

store.cloneModule('demo2', 'demo4', true)

const res = store.hasModule('demo2') //判断模块是否存在
console.log(res)

store.replaceState({ ... }) //替换当前 store 的根状态

/* subscribe, subscribeAction, subscribeGetter,
   设置全局mutations, actions, getters的订阅 */

store.subscribe({
    before(mutations, state) {
        console.log('mutations before', mutations, state)
    },
    after(mutations, state) {
        console.log('mutations after', mutations, state)
    },
    error(error) {
        console.log('mutations error', error)
    }
})
store.subscribeAction((actions, state) => {
    console.log('actions after', actions, state)
}, {
    prepend: false
})
store.subscribeGetter({
    before(value, state) {
        console.log('getter before', value, state)
    },
    after(value, state) {
        console.log('getter after', value, state)
    },
    error(error) {
        console.log('getter error', error)
    }
})

/* 命名空间获取对应的项，创建module时，设置namespaced:true */

const resState = store.mapState(['20221213/state/a', '20221212/state/a'])
console.log(resState)

const resActions = store.mapActions(['20221213/actions/setAValue', '20221212/actions/setAValue'])
console.log(resActions)

/* use 和 extend 扩展功能 */

use(() => {
  test(){
    ...
  }
})

store.test()

store.extend({
  test(){
    ...
  }
})

store.test()

let a = {}
store.extend({
  test:1
}, a)

a.test // 1

/* service-worker，https下操作 */

const swStore = createSWStore({
module: './service-worker.js',
updated(){ ... } //更新完的后续操作
})

const button = document.querySelector('.update_web')
button.addEventListener('click', (e) => {
    swStore.update() //更新操作
});

...

VUE 2 使用方法

/* main.js */
...
import { createStore, Store } from "mfo-store/mfox.window";
import { install } from "mfo-store/mfox.vue";

const mfoxStore = createStore({
  currentModule: "BASEMFOSTORE",
  mode: "large", //后期提供
  modules: {
    BASEMFOSTORE: {
      state: {
        a: 1,
      },
      mutations: {
        setValue(state, v) {
          const a = this.computed("setValue") + v;
          this.setState("a", a);
          console.log(state);
        },
      },
      actions: {
        setValue(store, v) {
          store.commit("setValue", v);
        },
      },
      getters: {
        setValue(state) {
          return state.a + 1;
        },
      },
    },
    test: {
      state: {
        a: 5,
      },
      mutations: {
        setValue(state, v) {
          const a = this.computed("setValue") + v;
          this.setState("a", a);
          console.log(state);
        },
      },
      actions: {
        setValue(store, v) {
          store.commit("setValue", v);
        },
      },
      getters: {
        setValue(state) {
          return state.a + 1;
        },
      },
    },
  },
});
install(Vue, "store", mfoxStore);
...

/* home.vue */
...
{{ a }}

data(){
    return {
        a: 1
    }
},
created() {
    const store = this.$store;
    console.log(store);
    store.dispatch("setValue", 5).then(() => {
      this.a = this.$store.state.a;
    });
    store.switchModule("test");
    store.dispatch("setValue", 5).then(() => {
      this.a = this.$store.state.a;
    });
}
...

VUE 3 使用方法

/* main.js */
...
import { createStore, Store } from "mfo-store/mfox.window";
import { install } from "mfo-store/mfox.vue";

const mfoxStore = createStore({
  currentModule: 'BASEMFOSTORE',
  mode: 'large', //后期提供
  modules: {
    BASEMFOSTORE: {
      state: {
        a: 1,
      },
      mutations: {
        setValue(state, v) {
          const a = this.computed('setValue') + v;
          this.setState('a', a);
          console.log(state);
        },
      },
      actions: {
        setValue(store, v) {
          store.commit('setValue', v);
        },
      },
      getters: {
        setValue(state) {
          return state.a + 1;
        },
      },
    },
    test: {
      state: {
        a: 5,
      },
      mutations: {
        setValue(state, v) {
          const a = this.computed('setValue') + v;
          this.setState('a', a);
          console.log(state);
        },
      },
      actions: {
        setValue(store, v) {
          store.commit('setValue', v);
        },
      },
      getters: {
        setValue(state) {
          return state.a + 1;
        },
      },
    },
  },
});

const app = createApp(App);
app.use(router);

install(app, 'store', mfoxStore);

app.mount('#app');

/* home.vue */

{{ data.a }}

<script setup>
  ...
  import { reactive, onMounted } from 'vue';
  import { useStore } from '../lib/js/mfox.vue';
  const data = reactive({
    a: 1,
  });
  onMounted(() => {
    const store = useStore();
    store.dispatch('setValue', 5).then(() => {
      Object.assign(data, { a: store.state.a });
    });
    store.switchModule('test');
    store.dispatch('setValue', 5).then(() => {
      Object.assign(data, { a: store.state.a });
    });
  });
</script>

jQuery 使用方法

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="mfox.window.js"></script>
<script src="mfox.jquery.js"></script>
<script>
    const jquery = $.createStore({
        currentModule: '20221223',
        state: {
            a: 3,
            b: 'c',
            c: null
        },
        mutations: {
            setAValue(state, v) {
                this.setState("a", this.computed('setAValue') + v)
            }
        },
        actions: {
            setAValue(store, v) {
                store.commit('setAValue', v)
            }
        },
        getters: {
            setAValue(state) {
                return state.a + 1
            }
        }
    })
    const res = jquery.store.hasModule('20221223')
    console.log(res)
</script>