Mfo-store, a front-end data processing module.
`
或
`
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";
`
或
`
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 }}
`
##### jQuery 使用方法
`
``