Question

我已尝试将v-if值设置为计算，数据，作为道具传递，只是直接引用状态，但它永远不会重新渲染，尽管我检查的状态更改为true。

目前我直接引用商店

<template v-if="this.$store.state.showReviews">

我在Vuex Action中执行AJAX请求

getBikeReviews(context, i){
  console.log("getBikeReviews");
  axios.get('http://mpaccione.com/wp-content/themes/webdev/projects/Web_Design_4/Creating_Online_Store/api/get_reviews.php?index='+i).then((res) => {
    context.commit('storeBikeReviews', {"index": i, "json": res.data});
    context.commit('showReviews', true);
  });
}

国家变异为真

showReviews (state, payload){
  console.log("showReviews");
  state.showReviews = payload;
}

但是模板永远不会重新渲染。

Answer 1

您是否尝试过使用getter或计算值？

computed: {
  showReviews() {
    return this.$store.state.reviews || []
  },
  reviews() {
    return this.$store.state.showReviews === true
  }
}

另外，最好尽可能使用Vue。$ set而不是简单的赋值。

Import Vue from 'vue';

showReviews (state, payload){
  Vue.$set(state, 'showReviews', payload);
}

虽然这可能无法解决某些价值类型的问题，恕我直言，但最好只是一直申请，所以你不要忘记确实需要它的那个。

最后，如果您真的很难获得反应，那么您可以在调整this.$forceUpdate(); （或Vue.$forceUpdate();）之后强制重新渲染。突变

Vue.js Vuex State Change不会使用v-if重新呈现模板

1 个答案: