demo
创建ChildVuex实例,存储user数据
// ./store/user.js
import { ChildVuex } from "super-vuex";
// 'user'为命名空间
const child = new ChildVuex('user');
export default child;
// 初始化vuex配置参数
child.value = {
name: 'evio',
age: 18,
students: [
{
name: 'yixianle',
age: 10
}
],
load: {
allow: true,
total: 100
}
};
// 你也可以写成这样
child.setState({
name: 'evio',
age: 18,
students: [
{
name: 'yixianle',
age: 10
}
],
load: {
allow: true,
total: 100
}
})
可以创建多个,这里再创建一个ChildVuex实例,存储sub数据
// ./store/sub.js
import { ChildVuex } from "super-vuex";
// 'sub'为命名空间
const sub = new ChildVuex('sub');
export default sub;
sub.value = {
name: 'evio',
subs: [1,2,3,4],
isVip: false,
};
创建一个SuperVuex实例
// store.js
import { SuperVuex } from 'super-vuex';
// 两个vuex插件,vuexPromise和vuejsStorage
import vuexPromise from 'vuex-promise';
import vuejsStorage from 'vuejs-storage';
import UserStore from './store/user';
import Subs from './store/sub'
const Main = new SuperVuex();
Main.setModule(UserStore);
// 可以set多个module
Main.setModule(Subs);
// 在SuperVuex中使用插件
Main.setPlugin(vuexPromise, vuejsStorage);
export default Main.init();
在SuperVuex初始化之后,还可以动态注入或者解注module模块
import store from 'store.js'
const newModule = new ChildVuex('newModule');
// 动态注入模块
store.$connect.registerModule(newModule);
// 动态解注模块
store.$connect.unregisterModule('newModule');
在VUE中如何使用
<template>
...
</template>
<script>
import store from './store';
export default {
store: store,
name: "index",
methods: {
changeName() {
this.$store.user.commit('name', 'someone');
},
changeAllow() {
this.$store.user.commit('load.allow', false);
},
pushStudent() {
this.$store.user.push('students', {
name: 'huaping',
age: 300
});
},
pushSubs() {
this.$store.sub.push('subs', 10);
},
popSubs() {
this.$store.sub.pop('subs');
},
unshiftStudent() {
this.$store.user.unshift('students', {
name: 'huaping1',
age: 302
});
},
shiftStudent() {
this.$store.user.shift('students')
},
deleteStudent() {
this.$store.user.splice('students', 0, 1);
},
gets() {
this.$store.user.dispatch('load.data');
}
}
}
</script>