web-dev-qa-db-ja.com

（ゲッターなしで）vuex状態プロパティに直接アクセスすることは悪い習慣ですか？なぜですか？

ここに私のstore.jsファイルがある場合：

const state = {
  count: 0,
  loggedIn: false
}

const mutations = {
  UP_COUNT(state) {
      state++;
  }
}

const actions = {
  upCount({ commit }) {
    commit('UP_COUNT');
  }
}


状態のcountを私のVueコンポーネントの1つから増やすとしましょう。アクションを呼び出して、突然変異をコミットします。

this.$store.dispatch('upCount');


次に、別のVueコンポーネントで、状態カウントを使用したいとします。

<div class="count">{{ this.$store.state.count }}</div>


このスタイルの何が問題になっていますか？ （対$this.store.getters...）

javascriptvue.jsvuejs2getter-settervuex
11
tyler-g

この投稿 で指摘したように、あなたがしなければならない困難かつ迅速な方法はありませんが、練習に従い、最高です。

ゲッターの使用はやり過ぎに見えるかもしれませんが、ゲッター名が同じである限り、ゲッターを使用して舞台裏のデータを変更できます。これにより、多くの作業をリファクタリングし、他の場所への参照をすべて検索する手間を省くことができます。使った事のある this.$store.state.module.someValue。

また、複数の状態変数に基づくデータを1つのゲッターに返すこともできます。

`isAllowed: 'getIsAllowed'`

に基づいている可能性があります

getIsAllowed (state) {
  return state.loggedIn && state.hasPermission && state.somethingElse
}

コンポーネントの各状態変数を使用してロジックを複数回実行するのではなく、isAllowedのベースを1か所で簡単に変更できます。

9
webnoob