npm:vue-lazy-store

README

简介：一个简易版的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

Usage no npm install needed!