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

Question

I've tried having the v-if value set in computed, data, passed as props and just a direct reference to state but it NEVER re renders despite the fact that the state I check for is changed to true.

Currently I have it directly referencing the store

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

I perform an AJAX Request in my Vuex Action

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);
  });
}

The State gets Mutated to true

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

However the template never re-renders.

Answer 1

Have you tried using getters or computed values?

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

also, it's a good idea to use Vue.$set whenever possible instead of simple assignment.

Import Vue from 'vue';

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

while this may not resolve the issue with some value types, IMHO, it's a good idea to just apply all the time, so you don't forget the one that does need it.

finally, if you're really struggling to get the reactivity to kick in, you can force a re-render by calling this.$forceUpdate(); (or Vue.$forceUpdate(); ) after your mutation