Vue.js Vuex状态更改不会使用v-if重新呈现模板

Question

我试过在计算的数据中设置v-if值，将其作为prop传递，并且只是直接引用状态，但是即使我检查的状态已更改为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

您是否尝试过使用吸气剂或计算值？

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();来强制重新渲染this.$forceUpdate(); （或Vue.$forceUpdate(); ）