Магазин Nuxt.js не сохраняется
У меня возникли странные проблемы с моей установкой Nuxt.js. Некоторые состояния в магазине не сохраняются, каждый раз, когда я загружаю другое представление, они возвращаются к значению по умолчанию.
страницы / test.vue
<template>
<section class = "section">
<b-container>
<b-row>
<b-col cols=12>
<b-button @click = "setTest" variant = "dark">test</b-button> | {{this.$store.state.test}} |
</b-col>
</b-row>
</b-container>
</section>
</template>
<script>
export default {
name: 'test',
methods: {
setTest() {
this.$store.commit("setTest")
},
}
}
</script>
магазин / index.js
export const state = () => ({
test: "test"
})
export const mutations = {
setTest: (state) => state.test = 'Hello'
}
Сценарий тестирования заключается в нажатии кнопки «test», которая вызывает метод с фиксацией мутации «setTest», который устанавливает состояние в «Hello». В настоящее время он работает нормально, но если я изменил представление или перезагрузил страницу, по умолчанию будет установлено состояние «тест».
Что я делаю неправильно?
Привет, @kissu :-) Я "меняю вид", просто нажимая на ссылки на панели навигации, например: <b-dropdown-item href = "/ profile"> {{$ t ("my_profile")}} </ b -dropdown-item> Так это действительно перезагрузка? Я использую обычные встроенные вещи из nuxt.js
Ответы 1
Хорошо, поведение полностью логично. Vuex не должен быть постоянным.
Для любой настойчивости во внешнем интерфейсе вам потребуется либо:
- печенье
- localStorage
- IndexedDB
- вернуть данные после вызова серверной части
Некоторые из пакетов здесь могут быть полезны: https://github.com/vuejs/awesome-vue#persistence
Если вы перезагрузите страницу с помощью F5, весь ваш JS будет удален и загружен снова. Следовательно, государственный не будет сохраняться, поскольку это будет совершенно новая страница. При работе с интерфейсными фреймворками нельзя ожидать, что они будут работать только после обновления страницы.
То же самое, когда вы следуете за href, это настоящая навигация настоящий. Что вам нужно сделать, так это использовать компонент <nuxt-link></nuxt-link> с чем-то вроде to = "/profile", чтобы позволить VueJS перейти на этот URL.
NuxtLink - это компонент Nuxt.js и, по сути, компонент поверх <router-link></router-link>, то есть Маршрутизатор Vue.
TL; DR: вы не можете использовать такие вещи, как window.location.href или <a href = "...". Вы можете использовать указанные компоненты либо в Nuxt (nuxt-link), либо в маршрутизаторе Vue (router-link), если вы используете только VueJS.
Прочтение документации по маршрутизатору Vue может стать хорошим началом для понимания вещей немного больше!
Также могу предложить Плагин Vuex Persisted State.
Совершенно законно, что магазин Vuex "сбрасывается", если вы F5 страница. Что вы имеете в виду под «изменил точку зрения»? vue-router или изменяя URL самостоятельно?