javascript - 如何修复 vue/计算属性中的无副作用？

Question

我创建了一个计算以使“显示更多”按钮在总数据等于显示数据时消失。但在 VueJS v3.6 引入此 ESlint 规则后，我找不到任何方法来解决该问题。我该如何修复它？

<template>

<div class="row sorting">
 <select v-model='sort' class="form-control" id="sorting">
  <option value="">Default</option>
  <option value="rentlow">Rent (ascending)</option>
  <option value="renthigh">Rent (descending)</option>
  <option value="arealow">Area (ascending)</option>
  <option value="areahigh">Area (descending)</option>
 </select>
</div>

上面是排序属性，下面是axios API调用数据。我使用 v-for。

<div class="row">
 <div v-for='(property, idx) in filteredproperties' :key='idx' class='col-md-6 text-left'>
  <img v-if='property.thumbnail' :src='backendurl + property.thumbnail.url'>
  <img v-if='!property.thumbnail' src='pictures/inner.png'>
  <h4>${{ property.rent }} / mo</h4>
  <h3>{{ property.title }}</h3>
  <span> {{ property.address }}</span>
  <div>{{ property.area }}
  <br>{{ property.room }}
  <br>{{ property.livingroom }}
  <br>{{ property.date }}
 </div>
 <button @click='showmore' v-if='totalblog > showing'>Show More</button>
</div>

<form>
 <div class="form-group">
  <label for="exampleFormControlInput1">address</label>
  <input type="text" v-model='filtereddata.title' class="form-control" id="exampleFormControlInput1">
 </div>
 <div class="form-group">
  <label for="exampleFormControlSelect1">District</label>
  <select class="form-control" v-model='filtereddata.district' id="exampleFormControlSelect1">
   <option value="all"> All </option>
   <option value="dis1">District 1</option>
   <option value="dis2">District 2</option>
   <option value="dis3">District 3</option>
  </select>
 </div>
 <button type="submit" class="btn btn-primary mt20">Search</button>
</form>

</template>

控制过滤器、排序和按钮的 javascript。问题是我不能使用“this.totalblog = temp.length”，因为它说有一个意想不到的副作用。我不知道如何在加载所有数据后消失显示更多按钮。还有其他选择吗？

<script>
export default {
  data () {
    return {
      frontendurl: process.env.frontendurl,
      backendurl: process.env.backendurl,
      filtereddata: {
          title: '',
          district: 'all'
      },
      sort: '',
      showing: 2,
      totalblog: ''
    }
  },
  async asyncData ({ $axios }) {
    const properties = await $axios.$get(process.env.backendurl + '/properties')
    return { properties }
  },
  methods: {
    showmore () {
      this.showing = this.showing + 2
    }
  },
  computed: {
    filteredproperties () {
      let temp = ''
      if (this.filtereddata.district === 'all') {
        temp = this.properties.filter(x => x.title.toLowerCase().includes(this.filtereddata.title))
      } else {
        temp = this.properties.filter(x => x.title.toLowerCase().includes(this.filtereddata.title) && x.district === this.filtereddata.district)
      }
      this.totalblog = temp.length /* unexpected side effect */
      /* sorting algorithm */
      if (this.sort === 'rentlow') {
        temp.sort((a, b) => {
          return a.rent - b.rent
        })
      }
      if (this.sort === 'renthigh') {
        temp.sort((a, b) => {
          return b.rent - a.rent
        })
      }
      if (this.sort === 'arealow') {
        temp.sort((a, b) => {
          return a.area - b.area
        })
      }
      if (this.sort === 'areahigh') {
        temp.sort((a, b) => {
          return b.area - a.area
        })
      }
      return temp.slice(0, this.showing)
    }
  }
}
</script>

非常感谢。

Answer 1

ESLint 抛出此警告(或错误 - 取决于您的设置)，因为您的 compulated 属性中存在不需要的副作用，即:您设置了 totalblog 组件的 data 属性。

计算值(尽管以函数形式呈现)不应更改其范围之外的任何内容。

不过，有几个解决方案可以解决您的问题:

0。就这样吧

如果这是警告，那么您可以接受。如果您确定需要这样做，则只需忽略该警告即可处理该警告。这不是一件好事，但警告就是警告:它们可能会导致问题，但仅此而已。

1。删除 ESLint 规则

只需在产生问题的行上方添加 //eslint-disable-next-line vue/no-side-effects-in-compulated-properties 即可。 (更多关于此here。)

2。拥有更好的代码结构

例如这样的事情:

<script>
export default {
  data() {
    filtereddata: {
      title: '',
      district: 'all'
    },
    showing: 2,
    sort: '',
  },
  computed: {
    totalblog() {
      return this.temp.length
    },
    temp() {
      if (this.filtereddata.district === 'all') {
        return this.properties.filter(x => x.title.toLowerCase().includes(this.filtereddata.title))
      } else {
        return this.properties.filter(x => x.title.toLowerCase().includes(this.filtereddata.title) && x.district === this.filtereddata.district)
      }
    },
    filteredproperties() {
      return this.sortProperties(this.temp)
    },
  },
  methods: {
    sortProperties(list) {
      let temp = [...list]
      if (this.sort === 'rentlow') {
        temp.sort((a, b) => {
          return a.rent - b.rent
        })
      }
      if (this.sort === 'renthigh') {
        temp.sort((a, b) => {
          return b.rent - a.rent
        })
      }
      if (this.sort === 'arealow') {
        temp.sort((a, b) => {
          return a.area - b.area
        })
      }
      if (this.sort === 'areahigh') {
        temp.sort((a, b) => {
          return b.area - a.area
        })
      }
      return temp.slice(0, this.showing)
    },
  },
}
</script>