1.0.1 • Published 2 years ago
@thorolf/vue-y v1.0.1
Vue-y
vue-y is a centralized state manager
why vue-y ?
vue-y is an alternative to vuex main diffrence is vuey use class with typing
install
npm install --save vue-y
how to use
store
//my-store.ts
class MyClass {
a?: boolean;
b?: number;
c?: string;
d?: Date;
}
const intialValue:MyClass = {};
const myStore = new Store<MyClass>('storeName', intialValue);
export { myStore, MyClass };
//main.ts
import VueY from 'vue-y';
import { myStore } from './my-store.ts';
Vue.use(VueY, {
stores: [
myStore
]
});
custom getters and actions
class MyStore extends Store<MyClass> {
getters = {
...super.getters,
getA: () => {
return this.get().a;
}
}
actions = {
...super.actions,
setA: (value:boolean) => {
this.setProperty('a', value);
},
loadFromApi: () => {
return apiLoad().then((result: MyClass) => {
this.set(result);
return result;
});
}
}
}
const intialValue:MyClass = {};
const myStore = new MyStore('storeName', intialValue);
save and load
stores can be automaticly saved in localStorage or sessionStorage
const intialValue:MyClass = {};
const myStore = new Store<MyClass>('storeName', intialValue, SaveStrategy.SESSION);
custom serialization and deserialisation can be defined
class MyStore extends Store<MyClass> {
serialize(state:MyClass):string{
// todo
}
deserialize(stateStr:string):MyClass{
// todo
}
}
const intialValue:MyClass = {};
const myStore = new MyStore('storeName', intialValue, SaveStrategy.LOCAL);
vue component usage
import { myStore, MyClass } from '@/store/my-store';
export default Vue.extend({
name: 'MyComponent',
computed: {
testValue: myStore.getters.value
},
created () {
myStore.actions.loadFromApi().then(()=> console.log('loaded'));
},
methods: {
write (val: MyClass) {
myStore.actions.set(val);
},
toggleA () {
myStore.actions.setA(!this.testValue.a);
}
}
});
resetAll, clearAll
resetAll and clearAll call each store reset or clear function if they exists
this.$vuey.resetAll();
this.$vuey.clearAll();