Localstorage.getItem () не работает в NUXT JS
Я пытаюсь разработать корзину покупок с помощью nuxt js. Я успешно сохраняю данные тележки в локальном хранилище, но не могу их получить.
Примечание: я не хочу использовать vuex-persistedstate.
Взгляните на первый файл, который я проверил, доступны ли данные из локального хранилища, затем покажите эти данные. Если нет, то покажите пустой массив. Но он всегда возвращает пустой массив.
Прочтите мой ответ. Здесь много проблем. Чтобы Vuex был реактивным, вам необходимо обновить значения в коммите. Во-вторых, коммиты всегда не должны иметь побочных эффектов и обновлять только один элемент магазина. Вы можете связать коммиты или запускать другие методы из коммитов с помощью действий
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я вижу много мелких проблем с этим.
Во-первых, похоже, что вы поставили addToCart и saveInLocalStorage, судя по тому, что вы фиксируете saveInLocalStorage.
Мутации следует использовать только для установки состояния одной переменной Vuex.
Они должны быть чистыми, что означает, что у них не должно быть побочных эффектов.
Вам необходимо использовать действие для saveInLocalStorage и действие для commit, мутации addToCart, прежде чем использовать dispatch для запуска действия saveInLocalStorage.
Во-вторых, неясно, где вы на самом деле запускаете эту функцию получения из локального хранилища. Вы используете его на верхнем уровне магазина Vuex?
Если это так, то для решения реальной проблемы, связанной с тем, что хранилище Vuex не обновляется, вам понадобится функция, отвечающая за получение значения storedCart и использование его для установки cart в качестве мутации, чтобы гарантировать, что хранилище Vuex действительно обновляется.
Наконец, здесь нет необходимости использовать троичную систему. Просто установите объект Vuex cart как пустой массив.
Не могли бы вы дать мне какое-нибудь представление, как я могу сделать функцию, которая обновит корзину и установит ее на storeCart?
Ну вот только что с мутацией покончено. Вы имеете в виду тот, который загрузит его из локального хранилища и установит? Опять же, это тоже должна быть мутация. Все, что обновляет переменные Vuex, должно быть мутацией. Все, что имеет побочные эффекты, должно быть действием. Действия могут использовать мутации. прочтите это :) vuex.vuejs.org/guide/actions.html, чтобы узнать о действиях
Вы должны создать действие, которое сохраняет в локальное хранилище, а затем фиксирует мутацию для отправки в корзину. Затем вы должны создать мутацию, которая поступает из локального хранилища и устанавливает данные хранилища
Скажем, у меня есть мутация getCartFromLocal (), где я получаю свои данные из локального хранилища. Где я должен зафиксировать эту мутацию?
Вы можете вызвать ему откуда угодно, правда. Я бы лично назвал это в хуке жизненного цикла created() вашего компонента макета / страницы - первым, самым верхним компонентом. Если он полагается на сначала монтируемые компоненты, используйте вместо этого mounted().
В чем именно проблема? Ошибка, данные не возвращаются, ответ отличается от ожидаемого?