vue-lazy-store
    Overview
    Discussions
    Alternatives
    Reviews
    Code
    Tutorials
    Playground
    Chat
    Versions

vue-lazy-store

Vue state management plug-in,Simple version of vuex

1.0.1  •  Updated 6 months ago  •  by Vitaminaq  •  MIT License

简介:一个简易版的vue状态管理包,支持完全体typescript。

Intro: Vue state management plug-in,Simple version of vuex,support typescript。

安装/Install

npm/cnpm install vue-lazy-store --save / yarn add vue-lazy-store

使用/Use

使用方法跟vuex类似,基本可以无缝切换.
Similar to vuex, it can be switched seamlessly.

store-ts
// src/store/index
import VueLazy from 'vue-lazy-store';
Vue.use(VueLazy);

class Text1 {
        public count: number = 0;
        public add(): number {
                return count ++;
        }
}

class BaseStore extends VueLazy.Store {
        public text1: Text1;
        public constructor() {
                super();
                this.text1 = new Text1();
                // 请在最后面激活store / Activate store at the end
                this.init();
        }
}

// ssr
export default BaseStore;
// csr
export default new BaseStore();

declare module 'vue/types/vue' {
	    interface Vue {
		        $store: BaseStore;
	    }
}

declare module 'vue/types/options' {
	    interface ComponentOptions<V extends Vue> {
		        store?: BaseStore;
	    }
}
store-js
import Vue from "vue";
import VueLazy from "vue-lazy-store";
Vue.use(VueLazy);

const text1 = {
        count: 0,
	add() {
		this.count++;
	}
}
const store = new VueLazy.Store({
	text1
});
store.init();

export default store;
.vue-ts
// support ts
import { Vue, Component, Watch } from 'vue-property-decorator';

@Component<LocalVue>({})
export default class LocalVue extends Vue {
        public get text1 () {
                return this.$store.text1;
        }
        public get count() {
               return this.text1.count; // 0
        }
        public mounted() {
                this.text1.add();
                console.log(this.count); // 1;
        }
}
.vue-js
computed: {
	text1() {
		return this.$store.text1;
	},
	count() {
		return this.text1.count;
	}
},
mounted() {
        this.text1.add();
	console.log(this.count); // 1;
}

ssr客户端接管状态 / ssr client takeover state

if (window.__INITIAL_STATE__) {
	store.replace(window.__INITIAL_STATE__);
 }

tips

状态变更上不像vuex那样严谨,需要commit状态为true时,才能更新。但是使用起来非常简单, 而且支持class写,进而完全支持ts,欢迎进一步完善。
State changes are not as rigorous as vuex, and they need to be true before they can be updated. But it’s very simple to use. And support class writing, and then fully support ts, welcome to further improve

之前想好的easy,simple之类的词语,一律用不了,那就不如叫它懒人store吧!
Previously thought of easy, simple and other words, are no longer used, it would be better to call it lazy store!

example

demo

Popularity

Maintenance

Development

Last ver 6 months ago
Created 6 months ago
Last commit 1 second ago
1 second between commits

Technology

Node version: 11.4.0
8.8K unpacked

Compliance

MIT License
OSI Approved
0 vulnerabilities

Contributors

0 contributors

Tags

vue
vuex
store
state management
Simple
easy
Ready for the next level?
Join Openbase's founding team to help us build the ultimate open-source app store, work with the latest technologies, and enjoy great culture, impact and autonomy
Openbase helps developers choose among and use millions of open-source packages, so they can build amazing products faster.
FacebookLinkedIn
© 2020 Devstore, Inc.