Vue.js 如何将计算属性中的vuex数据传递给数据属性

我需要一个帮助来从vuex发送数据，并在computed:{}中发送到data prop（data（）{return{}}）

我试过手表：但我的箱子不起作用，因为在那之后它必须作为道具发送

顺便说一句，除了任何vue组件中的computed属性之外，我无法在任何地方获得存储值，这让我很不安。。。。。。这个问题我已经挖了四个小时了。。请帮忙

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

数据（）{
返回{
chartdata:[]/为什么需要将数据从Vuex/getter复制到
数据中

从措辞上看，我假设您的Vuex存储最初是空的，并且使用一些异步Ajax调用（fetch/Axios）加载数据

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

data（）{
返回{
chartdata:this.$store.getters.getter
}
},

chartdata
将使用当前的getter值初始化（可能是空的，因为Ajax调用仍在进行中），当数据到达时，它将不会得到更新
为什么需要将数据从Vuex/getter复制到
数据中
？只需像使用
aa
一样使用
computed

从措辞上看，我假设您的Vuex存储最初是空的，并且使用一些异步Ajax调用（fetch/Axios）加载数据

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

data（）{
返回{
chartdata:this.$store.getters.getter
}
},

chartdata
将使用当前getter值初始化（可能为空，因为Ajax调用仍在进行中）当数据到达时，它不会得到更新
如果您想直接使用vuex数据，您可以创建一个计算属性并使用它。您不需要额外的步骤将其存储在数据属性中

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

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


计算：{
图表数据（）{
返回此。$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;
    }
  },


计算：{
图表数据（）{
返回此。$store.getters.chartData；
},
modifiedChartData（）{
const data=this.chartdata；
//在这里进行修改
返回数据；
}
},

带手表：

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


数据（）{
返回{
modifiedChartData:[]
}
}
计算：{
图表数据（）{
返回此。$store.getters.chartData；
},
},
观察：{
图表数据：{
处理程序（值）{
//在这里做修改吗
this.modifiedChartData=值；
},
立即：对
}
}
如果您想直接使用vuex数据，您可以创建一个计算属性并使用它。您不需要额外的步骤将其存储在数据属性中

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

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


计算：{
图表数据（）{
返回此。$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;
    }
  },


计算：{
图表数据（）{
返回此。$store.getters.chartData；
},
modifiedChartData（）{
const data=this.chartdata；
//在这里进行修改
返回数据；
}
},

带手表：

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


数据（）{
返回{
modifiedChartData:[]
}
}
计算：{
图表数据（）{
返回此。$store.getters.chartData；
},
},
观察：{
图表数据：{
处理程序（值）{
//在这里做修改吗
this.modifiedChartData=值；
},
立即：对
}
}
这不起作用…这就是为什么我要复制它…它只获取初始数据…耶，这就是我说的…不要尝试将getter数据复制到
数据中
是的，我说得对，但正如我在上面的问题上所说的，我需要通过绑定所有相关数据将其发送到数据道具…是一个图表包装器组件。是否有wa我可以绑定到数据道具？或者我应该修复结构吗？这不起作用…这就是为什么我要复制它…它只获取初始数据…耶，这就是我说的…不要尝试将getter数据复制到
数据中
是的，我说得对，但正如我在上面的问题上所说的，我需要通过绑定所有相关数据将其发送到数据道具ve data…是一个图表包装组件。有什么方法可以绑定到数据道具？或者我应该修复结构吗？非常感谢，我确实需要修改它，所以我正在尝试将它绑定到数据道具。我将在周一尝试并更新注释。我的时间不多了。我猜它可能会工作，但不确定原因是watch以前不工作。它没有根本不发送修改后的数据。无论如何，我会更新！祝你周末愉快！：）嘿！非常感谢！结果非常好：）虽然watch在组件初始化后不会立即发送更新后的数据，所以我添加了v-if=“isLoaded”.：）祝您度过愉快的一天！为了避免这种v-if逻辑，您可以使用长版本的watcher并添加immediate:true。这将在组件创建时立即触发watcher。我为此更新了我的答案：）非常感谢，我确实需要修改它，因此我正在尝试将其绑定到data prop。我将在周一尝试并更新注释。我的时间快用完了。我猜它可能会工作，但不确定原因是watch以前不工作。它根本没有发送修改过的数据。无论如何，我会更新！周末愉快！：）嘿！非常感谢！它工作了