Vue.js Vuex 状态更改不会使用 v-if 重新渲染模板答案

【问题标题】：Vue.js Vuex State Change doesn't rerender a template with v-ifVue.js Vuex 状态更改不会使用 v-if 重新渲染模板
【发布时间】：2018-10-23 10:13:14
【问题描述】：

我尝试在计算数据中设置 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;
}

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

【问题讨论】：

showReviews 最初是在你的 vuex state 中声明的吗？ Vue 无法检测到属性添加。
是的，它最初是在我的州声明的... const state = { bikes: [], reviews: [], showReviews: false, uploadProgress: [] }
你不要在模板<template v-if="$store.state.showReviews">中使用this
我已经进行了更改，但结果相同。我用 {{ }} 检查了商店，它返回 true，但没有重新渲染。

标签： javascript ajax vue.js axios vuex

【解决方案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();） 强制重新渲染

【讨论】：

附带说明，您的 ajax 以 html 格式响应。如果您有权访问，则应将其设置为 json。
谢谢，这是一个很好的答案，让我更好地理解了 Vue.js 以及 setter 和 getter：medium.com/js-dojo/…。使用 Vue.set 是这项工作的原因！