Fox3.0前端框架-全局存储Bus

标签（空格分隔）： Fox

---

1.说明

Fox框架提供了一个全局的数据存储，分别提供数据存储、数据获取、数据修改和数据删除的接口。

Bus的数据结构为树状结构，可在树任何一个节点存储数据，而不限于树叶节点

API

bus支持以下方法：

参数	类型
put	增加数据
get	获取数据
remove	删除数据

2.简单用法

Bus的增删改查用法

//加入数据
fox.bus.put("name","江成")
//获取数据
let name = fox.bus.get("name")
console.info(name)
//清理数据
fox.bus.remove("name")
//查看数据是否还存在
console.info("name是否存在? "+(fox.bus.contains("name")? "Yes":"No"))

运行结果：

江成
name是否存在? No

Vue上使用

new Vue({
    el: '#app',
    fox,
    data(){
        return {
            name:"江成"
        }
    },
    methods: {
        updateName () {
            //this.$bus.name.value = this.name 等同于 fox.bus.put('name', this.name)
            this.$bus.name.value = this.name
        }
    },
    beforeCreate(){
        //加入初始化数据，必须是否put方法
        this.$bus.put("name","江成")
    },
    watch:{
        '$bus.name.value'(newVal){
            console.info("修改名字："+newVal)
        },

        desc(newVal){
            console.info("详情:"+newVal)
        }
    },
    computed:{
        desc(){
            //this.$bus.name.value 等同于 fox.bus.get('name')
            return `我是谁? 我是：${this.$bus.name.value}`
        }
    }
})

操作说明

获取bus引用

通用方式：fox.bus Vue对象中：this.$bus

第一次存数据(初始化数据)

通用方式 fox.bus.put('name', ‘江成’) //right

Vue对象中 this.$bus.put('name', ‘江成’) //right

不允许通过fox.bus.name.value = '江成'的方式初始化数据

查看数据

通用方式

fox.bus.get('name')     //right
fox.bus.name.value      //right

Vue对象中

this.$bus.get('name')  //right

this.$bus.name.value //right

查看数据可以通过get(path)方法获取，同样也支持属性+value的方式获取

修改数据（初始化数据后）

通用方式

fox.bus.put('name', '江成')  //right
fox.bus.name = '江成'        //right

Vue对象中

this.$bus.put('name'，‘江成’)  //right

this.$bus.name.value = ‘江成’ //right

###删除数据 通用方式

fox.bus.remove('name')

Vue对象中

this.$bus.remove('name')

###computed函数中使用

 computed:{
            desc(){
                //this.$bus.name.value 等同于 fox.bus.get('name')
                return `我是谁? 我是：${this.$bus.name.value}`
            }

在computed中使用只能使用属性+value的方式，如this.$bus.name.value，不能使用get方法

###watch函数中使用

watch:{
    '$bus.name.value'(newVal){
        console.info("修改名字："+newVal)
    },
},

监听方式为属性+value的方式，如‘$bus.name.value’

3.模块化(多级存储)

步骤一，存储数据

//一层
let data1 = {
    id: "01",
    name: "一层数据"
}
//保存数据
fox.bus.put("level", data1);
//二层
let data2 = {
    id: "02",
    name: "二层数据"
}
//保存数据
fox.bus.put("level", "level-2-1", data2);
//三层
let data3 = {
    id: "03",
    name: "三层数据"
}
//保存数据
fox.bus.put("level", "level-2-2", "level-3", data3);

步骤二 数据获取

data1 = fox.bus.get("level");
alert("一层数据:" + JSON.stringify(data1));
data2 = fox.bus.get("level", "level-2-1");
alert("二层数据:" + JSON.stringify(data2));
data3 = fox.bus.get("level", "level-2-2", "level-3");
alert("三层数据:" + JSON.stringify(data3))

步骤三 数据修改

let n=0;
n++;
data1 = fox.bus.get("level");
data1.name = data1.name + ",修改次数:" + n;
data2 = fox.bus.get("level", "level-2-1");
data2.name = data2.name + ",修改次数:" + n;
data3 = fox.bus.get("level", "level-2-2", "level-3");
data3.name = data3.name + ",修改次数:" + n;

步骤四 数据清理

fox.bus.remove("level");

###在上述步骤一后，bus中的数据结构如下

###上述步骤4后，bus中等数据结构如下

4.Bus的使用场景

Bus的数据结构为Tree，每个分支可用于一个模块的存储，这样可以避免模块间数据的冲突，而且通过删除分支的parent节点，可以轻松情况整个模块对应的数据。