Vue简单状态管理

Vue简单状态管理

vue2 中可以使用 vue.observable

2.6.0 新增 低于这个版本的 无法使用 需要兼容

const state = {
    //// 字段
}
// 为了支持 低版本 vue
if (Vue.observable) { // observable 为2.6 新增api
    state = Vue.observable(state);
}else {
    state = new Vue({data: state});
}

const state = Vue.observable(
    {
        apiPath: ''

    }

);


class Model {
    constructor(model){
        this.state = model;
    }
    setApiPath(apiPath){
        this.state.apiPath = apiPath;
    }
}

const model = new Model(state);
export default model;

export {
    Model
}

vue3 中可以使用 reactive

import { reactive } from "vue";

const state:any = reactive({
    time: 202,
    array: []
})

class Model {
    public state: any;
    constructor(state: any){
        this.state = state;
    }
    setTime(time:any){
        state.time = time
    }
    setArray(){
        state.array = ['2','2']
    }
}

const model = new Model(state);
export default model;
export {
    Model
}