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

Question

我需要帮助从 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...

Answer 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
   }
}

Answer 2

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

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

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

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

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