0

Имею проект с функциями редактирования полей внутри массива объектов, сохранения, удаления, добавления новых полей.. Хотелось бы подключить 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)
        }
    }
})

0

2 ответа 2

2

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

localStorage.setItem('key', value);

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

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

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

1

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

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.