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

Question

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

我试过 watch: 但我的箱子不起作用，因为它必须在之后作为道具发送。

顺便说一句，除了在任何 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 中是一个空数组属性(data() return {}}.

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

Answer 1

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

一样使用 computed

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

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

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

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

Answer 2

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

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

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

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

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

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

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

how to pass vuex data in computed property to data prop

vue.js

vuex

computed-properties

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

how to pass vuex data in computed property to data prop

vue.js

vuex

computed-properties

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