VUE JS localStorage

188

18 декабря 2019, 14:30

Имею проект с функциями редактирования полей внутри массива объектов, сохранения, удаления, добавления новых полей.. Хотелось бы подключить LocalStorage, но не могу понять, как это делается во Vue. С документацией ознакомилась, но там информация мне оказалась не особо полезной Помогите пожалуйста... Мой код

var vm = new Vue({ 
    el: '#productList', 
    data: { 
        productName: '', 
        quantity: 1, 
        cost: 1, 
        isTouched: false, 
        currentItemIndex: null, 
        products: [ 
            { 
                product: 'Хлеб', 
                quantity: 4, 
                cost: 30 
            }, 
            { 
                product: 'Яблоко', 
                quantity: 8, 
                cost: 18 
            } 
        ] 
    }, 
    computed: { 
        inputValidation: function () { 
            return this.productName.trim().length == 0 || 
                this.quantity <= 0 || 
                this.cost <= 0  
        } 
    }, 
    methods: { 
         
        applyDefaultValues: function() { 
            this.productName = ''; 
            this.quantity = 1; 
            this.cost = 1; 
            this.currentItemIndex = null; 
        }, 
 
        choiceAction: function () { 
            this.currentItemIndex == null ? this.addItem() : this.saveChanges(); 
        }, 
 
        addItem: function () { 
            var newValue = { 
                product: this.productName, 
                quantity: this.quantity, 
                cost: this.cost 
            }; 
            this.products.push(newValue) 
            this.applyDefaultValues() 
            this.isTouched = false; 
        }, 
 
        edit: function (index) { 
            var editingItem = this.products[index]; 
 
            this.productName = editingItem.product; 
            this.quantity = editingItem.quantity; 
            this.cost = editingItem.cost; 
 
            this.currentItemIndex = index; 
        }, 
 
        saveChanges: function () { 
            var newObject = { 
                product: this.productName, 
                quantity: this.quantity, 
                cost: this.cost 
            } 
            this.products.splice(this.currentItemIndex, 1, newObject); 
            this.applyDefaultValues() 
            this.isTouched = false; 
        }, 
 
        deleteItem: function (index) { 
            this.products.splice(index, 1); 
        }, 
 
        blurCondition: function() { 
            this.isTouched = true; 
            console.log(this.isTouched) 
        } 
    } 
})

Answer 1

Со стороны Vue никаких специальных средств работы с хранилищем нет. В этом нет необходимости. Просто сохраняйте нужную вам переменную так:

localStorage.setItem('key', value);

Доставайте переменную так:

let info = localStorage.getItem('key');

В любом месте вашего кода можно пользоваться этими инструментами.

Answer 2

Из коробки vue не имеет никаких средств работы(но я видел пару либ в npm), да они особо и не нужны. Просто работаете штатно с объектом localStorage. Взаимодействие вероятно надо прописать в методах saveChanges и applyDefaultValues.

В доке на русском все неплохо описано