Как передать данные через Vue-Router , чтобы при обновлении дочерней страницы данные не исчезали?
Я новичок на Vue и столкнулся со следующей проблемой. Может кто то уже решал это или просто знает решение? Я через v-for создаю несколько карточек. Данные карточек я получаю из store:
<Item_Apartment
v-for="apartment in all_Apartments" :key="apartment.id"
v-show="apartment.id < 3"
:apartmentsData = "apartment" />
<router-link to="apartment" class="link">Смотреть все</router-link>
</div>
import Item_Apartment from './Item_Apartment.vue';
import { mapGetters, mapActions } from 'vuex';
export default {
name: 'Main_HotelApartment',
components: {Item_Apartment},
data() {
return {
}
},
computed: {
...mapGetters([
'all_Apartments'
])
},
mounted() {
this.get_Apartments()
// console.log(this.all_Apartments);
},
methods: {
...mapActions([
'get_Apartments'
]),
}
У каждой карточки есть кнопка, через которую я уже по router-link передаю полученные пропсы дальше:
<router-link :to="{name: 'Item_info', params: {item: apartmentsData}}">
<button type="button">Подробнее</button>
</router-link>
полученные данные я использую так:
<h1>Апартамент {{ item.name }}</h1>
<div class="info__images">
<img :src="require('../assets/images/'+ item.src.img1)" alt="img">
</div>
<div class="info__description">
<p>Площадь апартамента - {{ item.info.area }}</p>
<p>Вместимость - {{ item.qty }}</p>
<p>Спальные места - {{ item.info.beds }}</p>
<h3>Техника:</h3>
<ul v-for="(i, id) in item.info.tech" :key="id">
<li>- {{ i.item }}</li>
</ul>
<h3>Кухня:</h3>
<ul v-for="(i, id) in item.info.kitchen" :key="'a' + id">
<li>- {{ i.item }}</li>
</ul>
<h3>Ванная комната:</h3>
<ul v-for="(i, id) in item.info.bathroom" :key="'b' + id">
<li>- {{ i.item }}</li>
</ul>
<h3>Также:</h3>
<ul v-for="(i, id) in item.info.other" :key="'c' + id">
<li>- {{ i.item }}</li>
</ul>
<h3>Цены на проживание в 2022 году:</h3>
<ul v-for="(i, id) in item.info.price" :key="'d' + id">
<li>- {{ i.item }}</li>
</ul>
получаю их так:
export default {
name: 'Item_info',
props: ['item']
}
router выглядит так:
{
path: '/info',
name: 'Item_info',
component: () => import('../components/Item_info.vue'),
props: true
},
Они отрисовываются, но при обновлении страницы исчезают. Как мне сделать так, чтобы при обновлении страницы данные не исчезали?
Дополнение: Это JSON, который я получаю:
"apartments": [
{
"id": 1,
"name": "“Студия”",
"description": "4 этаж, 30 м2, балкон, кухня, ванная комната",
"qty": "комфортное проживание 3-х человек",
"beds": "большая двухспальная кровать, удобный диван",
"src": {
"img1": "Rectangle 4.png",
"img2": "Rectangle 5.png"
},
"info": {
"area": "30 м2",
"beds": "большая двуспальная кровать (180х200) с основанием Spring Box и хорошим ортопедическим матрасом. При необходимости кровать преобразовывается в два полноценных односпальных места (90х200). Удобный диван который раскладывается в спальное место. Постельные принадлежности и белье в полном комплекте.",
"tech": [
{
"id": 1,
"item": "WI-FI Ростелеком"
},
{
"id": 2,
"item": "кондиционер"
},
{
"id": 3,
"item": "телевизор с приставкой Ростелеком"
},
{
"id": 4,
"item": "стиральная машинка"
},
{
"id": 5,
"item": "варочная панель на 3 конфорки"
},
{
"id": 6,
"item": "микроволновка с конвекцией и грилем"
},
{
"id": 7,
"item": "холодильник"
},
{
"id": 8,
"item": "электрический чайник"
},
{
"id": 9,
"item": "двухкамерный холодильник"
},
{
"id": 10,
"item": "утюг, фен"
}
],
"kitchen": [
{
"id": 1,
"item": "кухонный гарнитур"
},
{
"id": 2,
"item": "посуда: тарелки, ложки, вилки, ножи, кастрюли, сковородки"
},
{
"id": 3,
"item": "принудительная вентиляция."
}
],
"bathroom": [
{
"id": 1,
"item": "полноценная ванная"
},
{
"id": 2,
"item": "раковина"
},
{
"id": 3,
"item": "с/у, бойлер"
},
{
"id": 4,
"item": "комплект из 2х полотенец для каждого гостя"
}
],
"other": [
{
"id": 1,
"item": "балкон с панорамным остеклением и лаунж-зоной"
},
{
"id": 2,
"item": "вид во двор"
},
{
"id": 3,
"item": "закрытый периметр"
},
{
"id": 4,
"item": "доступ на территорию и в корпуса через СКУД"
},
{
"id": 5,
"item": "въезд на парковку с помощью пульта."
}
],
"price": [
{
"id": 1,
"item": "01.04 по 30.04 – 2 000руб/сутки"
},
{
"id": 2,
"item": "01.05 по 31.05 – 3 000руб/сутки"
},
{
"id": 3,
"item": "01.06 по 15.06 – 4 000руб/сутки"
},
{
"id": 4,
"item": "15.06 по 30.06 – 4 500руб/сутки "
},
{
"id": 5,
"item": "01.07 по 15.07 – 5 500руб/сутки"
},
{
"id": 6,
"item": "15.07 по 25.08 – 6 000руб/сутки"
},
{
"id": 7,
"item": "26.08 по 10.09 – 4 500руб/сутки"
},
{
"id": 8,
"item": "10.09 по 30.09 – 3 500руб/сутки"
},
{
"id": 9,
"item": "Октябрь – 3 000руб/сутки"
}
]
},
"isParking": true,
"isConditioner": true,
"isWi_Fi": true,
"isTV": true
},
Это store:
import axios from "axios"
export default {
state: {
apartments: [],
},
getters: {
all_Apartments(state) {
return state.apartments
},
},
mutations: {
set_Apartments_To_State(state, apartments) {
state.apartments = apartments
},
},
actions: {
async get_Apartments(ctx) {
try {
const res = await
axios.get('http://localhost:3000/apartments')
ctx.commit('set_Apartments_To_State', res.data)
} catch(error) {
console.log(error);
}
},
},
}