Unexpected side effect in ~ computed property の対処法

はじめに

「 Unexpected side effect in ~ computed property」というエラーが出た時の対処法の1つを紹介します．

動作環境

vue-cli : 4.5.12
vue : 2.6.12

現象

算出プロパティ warningMessages を作成しました．

snackBar.vue

<script>
export default {
  name: "SnackBar",
  data() {
    return {
      snac: false,
    };
  },
  computed: {
    warningMessages() {
      if (this.$store.state.message.warnings.length > 0) {
        this.snac = true;
      }
      return this.$store.state.message.warnings;
    },
  },
};
</script>

すると，このようなエラーが発生しました．

 error  Unexpected side effect in "warningMessages" computed property  

原因

this.snac = true;

の部分がエラーの原因でした．算出プロパティ （warningMessages）は，データ（snac）を直接変更することができないようです．

解決策

snac を直接変更する openSnackBar メソッド を用意して，warningMessages から openSnackBar を呼び出すことにより解決しました．

snackBar.vue

<script>
export default {
  name: "SnackBar",
  data() {
    return {
      snac: false,
    };
  },
  // snac を変更するmethod を追加
  methods: {
    openSnackBar() {
      this.snac = true;
    },
  },
  computed: {
    warningMessages() {
      if (this.$store.state.message.warnings.length > 0) {
        this.openSnackBar(); // snac を直接変更するのではなく，method を呼び出して変更するようにした
      }
      return this.$store.state.message.warnings;
    },
  },
};
</script>

まとめ

算出プロパティは，データを直接変更することができないということが分かりました！これに対処する方法の一つとして，データを変更するメソッドを用意して，算出プロパティからそのメソッドを呼び出すということがあります．

参考リンク

こちらの記事でも，同じ「Unexpected side effect ~ 」というエラーについて取り扱われています．算出プロパティ内でdata の配列をソートしようとしたらエラーが出たため，「.slice()」を使って配列をコピーしたものをソートすることで解決しています．