'How can i react to route change and set value of computed propery even if its value did not change in Nuxt - Vue
I have a list of articles on the page and a load more button, and I need to implement a scroll to article after I come back from the article page to the main page. To keep the articles that were loaded after clicking load more button I store them in state store and the array itself is in the computed property like so:
computed: {
items() {
return this.$store.getters["article-scrollto/getArticlesLoaded"];
},
}
in mounted the init() function is being run and in this function I populate store variable with initial data
this.$store.commit("article-scrollto/setInitialArticles", items);
//and this is the setter
setInitialArticles(state, articles) {
if (state.articlesLoaded.length === 0) {
state.articlesLoaded = [...articles];
console.log({ initsetter: state.articlesLoaded });
}
},
when the load more button is clicked in onCLick function I add data to the state like so:
setArticlesLoaded(state, articles) {
const benchmark = new Set();
state.articlesLoaded.forEach((item) => {
benchmark.add(item.title);
});
articles.forEach((article) => {
if (!benchmark.has(article.title)) {
state.articlesLoaded = [...state.articlesLoaded, article];
}
});
},
And then when I click on the article and the route is changed, and then I come back to the article list technically the store data does not change and my computed property getter does not trigger, and I get no articles even though there are many in the store. I have tried to repopulate items() computed property in the mounted hook like so:
const storeArticles =
this.$store.getters["article-scrollto/getArticlesLoaded"];
if (storeArticles.length) {
console.log({ storeArticles });
this.items = [...storeArticles];
console.log({ itemsRefilled: this.items });
}
and it does show that there are items in this.items(), but there was no re-render and I get no articles on the page and in the console I have a warning saying that:
[Vue warn]: Computed property "items" was assigned to but it has no setter.
I read about computed setters, and it seems that I can set another data properties value from within computed property, not the value of computed property. Can you please hint me how should I deal with it? Thanks a lot
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
