Блог

в моем проекте laravel я использовал Vuejs и Vuex. когда страница загружается или обновляется, отображается компонент, но когда я меняю вкладку и перехожу на предыдущую вкладку, компонент исчезает.И когда я перехожу на следующую страницу и возвращаюсь обратно, все в порядке.

 below is component featured.vue

<template>
<div class="featured_slider slider">
<h4>featured</h4>
<div class="featured_slider_item" v-for="product in getFeaturedProducts">
<div class="border_active"></div>
<div class="product_item discount d-flex flex-column align-items-center 
justify-content-center text-center">
<div class="product_image d-flex flex-column align-items-center justify- 
content-center">
<img :src="'/Uploads/Products/' product.id '/cropped_' product.image.name" 
:alt="product.image.name"></div>
<div class="product_content">
<div class="product_price discount">Rs.{{product.price_old}}<span>Rs. 
{{product.price_new}}</span></div>
<div class="product_name">
<div><a href="#">{{product.title}}</a></div>`
</div>
<div class="product_extras">
<div class="product_color">
<input type="radio" checked 
name="product_color"style="background:#b19c83">
<input type="radio" name="product_color"
style="background:#000000">
<input type="radio" name="product_color"
style="background:#999999">
</div>
<button class="product_cart_button">Add to Cart</button>
</div>
</div>
<div class="product_fav"><i class="fas fa-heart"></i></div>
<ul class="product_marks">
<li class="product_mark product_discount">-25%</li>
<li class="product_mark product_new">new</li>
</ul>
</div>
</div>
</div>
</template>

<script>
export default {
data(){
return{
products:[]
}
},
computed:{
getFeaturedProducts(){
return this.$store.getters.featuredProducts;
}
},
created() {
return this.$store.dispatch('featuredProducts');
}
}
</script>
  

ниже state.js

 export default {
featuredProducts:[],
onSale:[]
}
  

ниже getters.js

 export const featuredProducts= state =>{
//console.log(state);
return state.featuredProducts
};

export const onSale= state =>{
//console.log(state);
return state.onSale
};
  

ниже mutations.js

 export const featuredProducts=(state,responseData)=>{
state.featuredProducts=responseData;
// console.log(responseData)
};

export const onSale=(state,responseData)=>{
state.onSale=responseData;
// console.log(responseData)
};
  

ниже actions.js

 import {sendGet} from "../../../utils/request";
export const featuredProducts =context=>{
sendGet('/product/products').then(response=>{
context.commit('featuredProducts',response.data.data)
});
};

export const onSale =context=>{
sendGet('/product/onsale').then(response=>{
context.commit('onSale',response.data.data)
});
};
  

Учитывая общую файловую структуру, 'public>js>app.js' которая app.js включает в себя все скомпилированные js, зависимости vue и прикрепляет экземпляр vue к телу страницы, ваш блейд, например index.blade.php , может иметь что-то вроде ::

<script type="text/javascript" src="js/app.js"></script>

В вашем шаблоне блейда измените его на что-то вроде этого, учитывая ту же файловую структуру:

<script type="text/javascript" src="{{url('js')}}/app.js"></script>