八、Vue之封装通用方法

以封装缓存为例进行讲解：
1.首先在 src 目录下新建 util 目录
2.新建 storage.js 文件
3.封装方法

// 封装本地存储的方法
var storage={
    set(key, value) {
        //对象必须序列化才能存入缓存
        localStorage.setItem(key, JSON.stringify(value));
    },
    get(key) {
        //反序列化
        return JSON.parse(localStorage.getItem(key));
    },
    remove(key) {
        localStorage.removeItem(key);
    }
}
export default storage;

4.使用封装的方法

<script>

//引入封装的方法
import storage from './util/storage.js';

export default {
    name: 'app',
    data() {
        return {
            todo: '',
            list: []
        }
    },
    methods: {
        addByEnterKey(e) {
            console.log("調用了");
            if (e.keyCode == 13) {
                this.add();
                // 调用封装的方法，缓存对象
                storage.set('list', this.list);
            }
        },
        add() {

            var obj = {
                title: this.todo,
                isCompleted: false
            };
            this.list.push(obj);
            this.todo = '';
        },
        remove(key) {
            this.list.splice(key, 1);
            storage.set('list', this.list);
        },
        save() {
          storage.set('list', this.list);
        }
    },
    // 生命周期函数  页面刷新时调用
    mounted() {
        // 调用封装的方法，取出缓存对象
        var list = storage.get('list');
        if (list) {
            this.list = list;
        }
    }
}
</script>