Question

我要做的是使用vue keep-alive缓存组件属性。但似乎没有缓存属性值。

在这里我使用这个数字的基准卡组件：

<div class="card-header">
    <h3 class="display-2 ctr">{{ avgClickRate }}<span class="percentage avg-ctr-percentage">%</span></h3>
</div>

我正在使用axios来获取这样的数据：

Axios.get(
        "/app_dev.php/general-benchmark/tags/" + this.$cookies.get("purposeId")
).then(
   function(response) {
     let tag = response.data.tag;
     this.tag = tag;

     let statistics = tag.statistics;
     let generalBenchmarkData = tag.generalBenchmark;

     this.clickThroughRatePercentage = Number(
         (generalBenchmarkData.activeCampaignClickThroughRate * 100).toFixed(0)
     );
)

以下是我如何使用它：

<keep-alive>
    <benchmark-cards :avgClickRate="clickThroughRatePercentage" :avgProjectWaste="avgProjectWaste"
                     :avgQualityScore="averageQualityScore"></benchmark-cards>
</keep-alive>

Answer 1

在document

中

注意，是专为直接使用的情况而设计的正在切换的子组件。

一些基本用例：

<!-- basic -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<!-- multiple conditional children -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- used together with `<transition>` -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

如果是你的情况，你没有在组件之间切换，所以使用keep-alive

是没用的

有关更多示例，请在this example中，每次单击创建帖子时，都会重新创建input-title组件。

您可能希望使用v-once代替

Vuejs使用keep-alive来缓存组件属性

1 个答案: