Vuetify/Vue.js箭头函数无法访问方法变量及ESLint报错问题

咱们一步一步拆解你遇到的问题：

1. 核心问题：异步操作的时序问题 #

Firestore的get()方法是异步的，它会立即返回一个Promise，而你的ratingsSum和ratingsAmountCounter变量的修改是在Promise的then回调里执行的。但你目前的代码里，修改完这两个变量后没有做任何后续操作——既没有计算平均值，也没有把结果同步到Vue组件的响应式数据中，所以ESLint才会提示“变量被赋值但未使用”。

另外，如果你试图在then回调外面使用这两个变量，会拿到初始值0，因为回调里的代码是在异步请求完成后才执行的，时序上晚于外部代码。

2. 文档数据访问错误 #

你直接用doc.rating获取评分是不对的，Firestore的文档快照（DocumentSnapshot）需要通过doc.data()方法来提取文档内的字段数据，正确的写法应该是doc.data().rating。

3. 关于作用域的误解 #

你尝试用this或者_this的方向是错的——ratingsSum和ratingsAmountCounter是在updateRating函数内部定义的局部变量，箭头函数的作用域已经能直接访问它们，根本不需要借助this。

修正后的代码方案 #

方案一：使用Promise链式调用（保持原风格） #

function updateRating() {
  const firestoreQuery = firebase
    .firestore()
    .collection('ratings')
    .where('qrCodeId', '==', this.qrCode.id);

  let ratingsSum = 0;
  let ratingsAmountCounter = 0;

  firestoreQuery.get().then(querySnapshot => {
    querySnapshot.forEach(doc => {
      // 修正：通过data()获取文档字段
      const rating = doc.data().rating;
      ratingsSum += rating;
      ratingsAmountCounter++;
    });

    // 在这里处理计算结果，比如更新组件的响应式数据
    const averageRating = ratingsAmountCounter > 0 ? ratingsSum / ratingsAmountCounter : 0;
    // 假设你的组件有一个averageRating的响应式属性
    this.averageRating = averageRating;
  }).catch(error => {
    // 别忘了处理错误
    console.error('获取评分数据失败:', error);
  });
}

方案二：使用async/await（更简洁的异步写法） #

如果你的环境支持ES2017+，推荐用async/await让代码更易读：

async function updateRating() {
  try {
    const firestoreQuery = firebase
      .firestore()
      .collection('ratings')
      .where('qrCodeId', '==', this.qrCode.id);

    const querySnapshot = await firestoreQuery.get();
    
    let ratingsSum = 0;
    let ratingsAmountCounter = 0;

    querySnapshot.forEach(doc => {
      const rating = doc.data().rating;
      ratingsSum += rating;
      ratingsAmountCounter++;
    });

    const averageRating = ratingsAmountCounter > 0 ? ratingsSum / ratingsAmountCounter : 0;
    this.averageRating = averageRating;
  } catch (error) {
    console.error('获取评分数据失败:', error);
  }
}

关键说明 #

• 一定要把平均值的计算和组件数据更新放在异步回调（或await之后）的逻辑里，确保是在数据获取完成后执行。
• 加上错误捕获（catch或try/catch），避免请求失败时出现未处理的Promise错误。
• 当没有评分数据时（ratingsAmountCounter为0），要做除以0的防护，避免NaN。

内容的提问来源于stack exchange，提问作者Bas von Bassadin