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

Question

我已经尝试在计算数据中设置 v-if 值，作为 props 传递并且只是对状态的直接引用，但它永远不会重新呈现，尽管我检查的状态已更改为 true。

目前我有它直接引用商店

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

我在我的 Vuex 操作中执行 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);
}

虽然这可能无法解决某些值类型的问题，恕我直言，始终应用是个好主意，这样您就不会忘记确实需要它的那个。

最后，如果您真的很难启动 react 性，您可以通过调用 this.$forceUpdate(); (或 Vue.$forceUpdate();) 在你的突变之后