如何将计算属性中的 vuex 数据传递给 data prop

Posted 2023-02-23

【中文标题】如何将计算属性中的 vuex 数据传递给 data prop

【英文标题】：how to pass vuex data in computed property to data prop

【发布时间】：2021-01-05 03:19:02

【问题描述】：

我需要帮助从 vuex 发送发送数据，并在计算中： 到数据 prop(data() return )

我试过手表：但我的情况不起作用，因为之后它必须作为道具发送。

顺便说一句，除了任何 vue 组件中的计算属性之外，我无法在任何地方获取存储值，这让我很不高兴......我现在正在研究这个问题四个小时......请帮忙。

<template>
     <pie-chart :data="chartdata" />
</template>

 data() 
    return 
chartdata: [] //<<<<- I need to set the data from vuex here but calling this.$store.getters.myGetter() doesn't work
    
,

  computed: 
    aa() 
      return this.$store.getters.getCurrentTodPlanARing;
    ,
  ,

我在我的 vuex 中没有发现任何问题。我只在计算中正确获得了所有数据！！！。 不知何故，每当我在挂载、方法甚至数据属性（数据（）返回中调用它时，我只有初始数据，它是 vuex 中的一个空数组。

所以我必须将我的 vuex 数据传递给 data prop...

【参考方案1】：

如果你想直接使用你的 vuex 数据，你可以创建一个计算属性并使用它。您不需要额外的步骤将其存储在数据属性中。

<template>
     <pie-chart :data="chartdata" />
</template>

  computed: 
    chartdata() 
      return this.$store.getters.chartData;
    ,
  ,

所以每次更新 vuex 存储时，chartData 属性也会更新。

如果您需要修改您的 vuex 数据，在将其传递给 PieChart 之前，您可以在该计算属性上创建一个监视或简单地创建另一个计算属性，它将为您完成工作。

<template>
     <pie-chart :data="modifiedChartData" />
</template>
computed: 
    chartdata() 
      return this.$store.getters.chartData;
    ,
    modifiedChartData()
      const data = this.chartdata;
      //Do your modifications here
       return data;
    
  ,

带手表：

<template>
     <pie-chart :data="modifiedChartData" />
</template>
data()
  return 
    modifiedChartData:[]
  

computed: 
    chartdata() 
      return this.$store.getters.chartData;
    ,
  ,
watch:
   chartdata:
      handler (value)
        //do modifications here
        this.modifiedChartData = value;
     ,
    immediate:true
   

【讨论】：

非常感谢，我确实需要修改它，所以我试图将它绑定到数据道具。我将在星期一尝试并更新评论。我没时间了。我猜它可能会起作用，但不确定因为手表以前不起作用。它根本没有发送修改后的数据。不管怎样，我会更新的！周末愉快！ :)

嘿！太感谢了！效果很好 :) 虽然 watch 在组件初始化后不会立即发送更新的数据，所以我添加了 v-if="isLoaded"。 :) 祝你有美好的一天！

为了避免这种 v-if 逻辑，您可以使用 watcher 的长手版本并添加 immediate:true。这将在组件创建时立即触发观察者。我为此更新了答案:)

【参考方案2】：

为什么需要将数据从 Vuex/getter 复制到 data 中？只需像使用 aa 一样使用 computed

从措辞中我假设您的 Vuex 存储最初是空的，并且通过一些异步 Ajax 调用 (fetch/Axios) 加载数据

data 是 Vue 在创建组件时调用的函数。如果你像这样使用 Vuex getter：

data() 
    return 
      chartdata: this.$store.getters.getter
    
,

chartdata 将使用当前的 getter 值初始化（可能为空，因为 Ajax 调用仍在进行中）并且不会在数据到达时更新

【讨论】：

这不起作用....这就是我尝试复制它的原因...它只获取初始数据...

是的，我就是这么说的...不要试图将 getter 数据复制到 data

是的，我猜对了，但正如我在上面的问题中所说，我需要通过绑定所有相关数据将其发送到数据道具... 是图表包装组件。有没有办法可以绑定到数据道具？还是我应该修复结构？