Problems with vuex data UPDAT
<script>
export default {
name: "index",
data() {
return {
products: this.$store.state.app.products
}
},
mounted() {
if (this.products.length <= 0) this.$store.dispatch("getProducts");
}
}
</script>
<template>
<ul>
<li v-for="(product,index) of productData ">{{prduct.title}}</li>
</ul>
</template>
asynchronously get data and assign values to products in actions in vuex
but if you do so, there will be no data on the first load, only after the route switch
is there any way to update the data in this component after assignment in vuex?
products should not be defined in data, but should be defined in computed calculation attribute:
<script>
export default {
name: "index",
computed: {
poducts() {
return this.$store.state.app.products
}
},
mounted() {
if (this.products.length <= 0) this.$store.dispatch('getProducts');
}
}
</script>
cause of error:
you first assign this.$store.state.app.products to the products in data, and then vuex gets the data to state.app.products asynchronously.
at this time, the products in vuex is updated after getting the data, but the data does not change in response to the change of products in vuex, so the products in data has no data.
after switching routes, your component is not cached, it has been destroyed when switching other routes, and re-rendered when switching back to get the products in vuex.
now the products in vuex already has a value, so the products in data can get the data.
the following is the vuex document that mentions the way to get the value in state. It's best to write it in the calculation attribute
ide/state.html" rel=" nofollow noreferrer "> vuex document
.
I don't understand whether you can't get the updated products data in store in the component or whether the store cannot get the products data after the component is updated.
generally uses monitoring to listen for changes in the data in store. I hope it will help you to describe the specific point
`< script >
next time.
export default {
name: "index",
data() {
return {
products: this.$store.state.app.products//products productData
}
},
mounted() {
//
//storegetProducts
if (this.products.length <= 0)
this.$store.dispatch('getProducts');
}
}
< / script > `
if you put the this.$store.state.app.products into the data to get it, the data will only be rendered once when the component is loaded. Although the value in the vuex is updated, the data will not respond to the update. You need to put the this.$store.state.app.products in the calculation attribute to get it, and you can listen through watch, so that every time the vuex is updated, you can Synchronize to the view.
computed: {
poducts() {
return this.$store.state.app.products
}
},
watch: {
poducts(val, oldval) {
...
}
}`
