Vue.js默认函数参数解构和'this' [重复]答案

【问题标题】：Vue.js default function parameter destructuring and 'this' [duplicate]Vue.js默认函数参数解构和'this' [重复]
【发布时间】：2019-11-19 15:38:49
【问题描述】：

在尝试声明与解构结合的默认参数时，我在使用 this 引用 data 时遇到问题。有人知道怎么做吗？

activated () {
  this.fillData()
},

data () {
  return {
    chartData: {
      distributionInitialData: {
        // data here
      }
    }
  }
},

methods: {
  fillData ({
      must = this.chartData.distributionInitialData,
      nice = this.chartData.distributionInitialData
    }) {
    // do something
    // function doesn't even get here because it gets error:
    // TypeError: Cannot read property 'must' of undefined
    // at VueComponent.fillData (Component.vue?4e6a:230)
    // at VueComponent.activated (Component.vue?4e6a:123)
  }
}

【问题讨论】：

不确定是否重复但绝对相关：stackoverflow.com/a/58934526/1048572
我的问题更多的是无法访问this。所有其他的东西都在工作。现在我不得不解决两个论点而不是解构一个论点，但问题仍然有效 - 我认为这是一个非常有趣的问题要解决。
访问this 工作正常。问题是您分配这些属性，而不是使用它们作为默认值。
我尝试使用 =，但因为它是 JSON，我不得不改用 :，这就是它爆炸的地方。如果我使用=，则会收到undefined 错误。
周围没有 JSON。这是方法定义中的一种解构模式。您能否发布整个代码（方法主体，以及您如何调用它）以及您收到的完整错误消息？

标签： javascript vue.js

【解决方案1】：

您需要设置参数（对象）的默认值，而不是其属性。

methods: {
  fillData ({must, nice} = {
      must: this.chartData.distributionInitialData,
      nice: this.chartData.distributionInitialData
    }) {
    // do something
  }
}

已根据 Bergi 的建议更新。

methods: {
  fillData ({
      must: this.chartData.distributionInitialData,
      nice: this.chartData.distributionInitialData
    } = {}) {
    // do something
  }
}

仅供参考，这是一个简单的codepen。

【讨论】：

这不适用于fillData({must: 2})
@Bergi 谢谢，我注意到了，我更新了你的答案。

【解决方案2】：

你可以的。

fillData ({ must, nice}) {
    must = must || this.chartData.distributionInitialData
    nice = nice || this.chartData.distributionInitialData

    // do something
}

【讨论】：

【解决方案3】：

所以这个问题与 Vue 在创建组件时如何将方法绑定到组件有关。函数定义无权访问实例，但在其中你可以使用this。

最简单的解决方案是立即检查未定义并根据所需的默认值进行设置。

fillData({ must, nice }) {
    if (must === undefined) must = this.chartData.distributionInitialData;
    if (nice === undefined) nice = this.chartData.distributionInitialData;

    // any other code here
}

您也可以尝试使用箭头函数来查看它是否可以解决此问题，因为它被引入以更具体的方式绑定到 this。也许是这样的：

fillData = ({ 
    must = this.chartData.distributionInitialData, 
    nice = this.chartData.distributionInitialData 
}) => {
    // any other code here
}

【讨论】：