Question

我是vuex的新手，但我仍然用光它了。可以说，我在product状态下有一个store列表。当我查看一个product时，我用该axios进行product.id调用，并将产品数据提交到currentProduct状态。然后，如果我查看其他产品，则页面呈现为currentProduct状态，即旧首先是我的action commits之后的数据。然后将其更新为新获取的currentProduct，然后vue将我的视图数据更改为新数据。 user可以清楚地看到旧数据被新数据替换。但是我只想在将新数据提交到我的state后才加载页面。

`store.js`

state :{
    productList:{},
    currentProduct:{
     id:'',name:'',price:'','seller'
    }
},
mutations:{
    UPDATE_CURRENT_PRODUCT : (state, data) =>{
     state.currentProduct = Object.assign({},state.currentProduct, data);
    }

},
actions:{
    fetchProducts(){
     const response = fetch...... // logic to fetch product
     commit('UPDATE_CURRENT_PRODUCT', response.data);
    }
}

我的渲染页面：

此页面显示我的产品列表

'productList.vue'

<div v-for="product in productList" @click="viewProduct(product.id)">
    <p>{{product.name}}</p>
</div>

computed(){

    ...mapState(['productList'])

},
methods:{
    viewProduct(product_id){
        this.$store.state.dispatch('fetchProducts', product_id);
    }
}

此页面呈现该特定产品的视图

`product.vue`

<div>
    <p>{{currentProduct.name}}</p>
</div>

computed(){

    ...mapState(['currentProduct'])

}

在我的product.vue中，首先显示旧数据，然后在一段时间后新数据替换了它。。。缺少了一些东西。我想直接看到新数据，而又看不到旧数据被新数据替换。有没有办法解决vuex

Answer 1

关键部分是：

我只想在新数据提交到我的状态后才加载页面

您要使异步方法彼此跟随。有一种很酷的方法。

我猜想在fetchProducts()中，axios会获取/发布数据。因为axios是基于promise的，所以您可以随它返回。

fetchProducts() {
 return axios.get('/get/some/data')
    .then(r => { // commit and stuff
     })
    .catch(e => { // error handling
     })
}

然后，你可以很容易地做到这一点：

this.$store.state.dispatch('fetchProducts', product_id)
 .then(r=> {if(r){ // get the data from vuex 
 } else { // error
 })
 .catch(e => {});

调度的then在轴的then之后运行。（例如：如果有两个Axios的所谓具有按顺序运行，则可以调用在第一的则方法的第二个，并且它解决了问题。）

希望您能理解这一点。：）

Answer 2

简单的解决方案是在加载/发送操作时将数据重置为初始值。

因此，尝试从此编辑代码：

actions:{
    fetchProducts(){
     const response = fetch...... // logic to fetch product
     commit('UPDATE_CURRENT_PRODUCT', response.data);
    }
}

对此：

actions:{
    fetchProducts(){
     // Add below line to reset the state when loading.
     commit('UPDATE_CURRENT_PRODUCT', null);
     /***********************************************/
     const response = fetch...... // logic to fetch product
     commit('UPDATE_CURRENT_PRODUCT', response.data);
    }
}

以上解决方案对我有用。希望这对您或其他人也有用。

Answer 3

为此，您应该使用async await，以便仅在检索到新数据后才更新组件。

async fetchProducts(){
    await const response = fetch...... // logic to fetch product
    commit('UPDATE_CURRENT_PRODUCT', response.data);
   }

与您的viewProduct方法相同。请参阅以下llink以获取更多详细信息（页面上的最后一个示例） https://vuex.vuejs.org/guide/actions.html

Vue Vuex：旧数据在计算出的属性更改之前会保留一段时间

3 个答案: