Добрый день. Сам не так давно начал использовать nuxt(vue) для создания небольших проектов. И появилась необходимость сохранения определенных переменных, объектов, массивов в локальном хранилище, для того, чтобы эти данные сохранялись даже после перезагрузки страницы.
Например, пользователь набросал товары в корзину, но после ухода с сайта и повторного захода на него, данные не сохранились. Начнем решение поставленной задачи.
Сразу скажу, сам я новичок и, возможно, профессионалам будет не интересна эта статья.
Начнем с создания проекта на nuxt.
Открываем командную строку , после установки node пишем команду npm create-nuxt-app test.
Ждём пока приложение установится. Создаём в корне проекта папку store, если она не создалась автоматически и в этой создаём файл index.js для инициализации нашего хранилища состояний.
В этом файле прописываем код:
1) Инициализация нашего хранилища, создается массив cart и переменная cartCount, которые будут принимать в себя значения.
export const state = () => ({
cart: [] ,
cartCount: 0,
})
Далее создаем мутации, для управления состояниями cart и cartCount.
Первая мутация addCart для добавления товара в корзину cart и увеличения общего счетчика товаров cartCount.
Вызов этой мутации мы будем использовать на кнопке добавить товар в корзину.
export const mutations = {
addCart(state, item) {
state.cart.push(item)
state.cartCount++;
this.commit('saveCart');
},
Далее идет мутация saveCart сохранения нашего хранилища в localStorage, иными словами мы будем хранить товары в корзине на стороне пользователя, чтобы после перезагрузки страницы или ухода с сайта и повторного захода наша корзина сохраняла в себе товары. Эту мутацию мы будем вызывать в конце мутации addCart, чтобы после добавления товара в корзину весь товар попадал в локальное хранилище.
saveCart(state) { localStorage.setItem('cart', JSON.stringify(state.cart)); localStorage.setItem('cartCount', state.cartCount); },
И, далее мы создадим мутацию initializeStore, которая при заходе пользователя на сайт или при обновлении страницы будет вытаскивать наши товары из локального хранилища и записывать их в state и дальше с ними мы будем работать.
initializeStore(state) {
try {
state.cart = JSON.parse(localStorage.getItem('cart'))? JSON.parse(localStorage.getItem('cart')):[]
state.cartCount = parseInt(localStorage.getItem('cartCount'))? parseInt(localStorage.getItem('cartCount')):0
} catch {
localStorage.setItem('cart', JSON.stringify(state.cart))
}
},
Как же нам дальше начать работать с этими мутациями. Допустим у нас есть страничка со списком товаров, к каждому товару мы добавляем кнопку купить примерно таким образом и на эту кнопку вешаем метод addToCart и в параметр метода передаем в скобках наш товар (product).
<button @click=" addToCart(product)"> Купить</button>
Далее в хуке жизненного цикла mounted мы вызываем мутацию initializeStore, для того, чтобы при загрузке страницы мы из локального хранилища записали данные в state, если они там есть.
mounted() {
this.$store.commit('initializeStore')
},
И далее в методе мы создаем функцию addToCart добавления товара в корзину, в ней мы принимаем в параметре товар, который добавляется в корзину и вызываем мутацию addCart, которая записывает наше состояние state.cart
methods: {
addToCart(product) {
this.$store.commit('addCart', product)
}
}
На этом все, теперь, все товары, которые добавляются в корзину никуда не пропадут после перезагрузок страницы.
Пишите в комментариях будет ли интересно, если напишу цикл статьей про создание блога на Nuxt с сохранением в базу данных MongoDb и авторизацией.