質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

1回答

6003閲覧

Vue.jsのcomputed、Vuexのgettersの使い分け

okpk

総合スコア38

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2018/11/21 09:22

タイトル通りVue.jsのcomputed、Vuexのgettersの使い分けについてわからないので質問です。

単一コンポーネント+store.jsの運用前提です。
store.jsのstateに管理したいデータを置き、stateの変更をmutationsで行い、App.vue側のcomputedで変更を感知しtemplateが動的に更新される例としてこのようなコードを書いています。下記のような感じです。

storeJs

1const store = new Vuex.Store({ 2 state:{ 3 counter:0 4 }, 5 mutations:{ 6 settingCounter(state){ 7 state.counter ++ 8 } 9 } 10});

Appvue

1 computed:{ 2 counterState(){ 3 return this.$store.state.counter 4 } 5 }, 6 methods:{ 7 counterClick(){ 8 this.$store.commit("settingCounter"); 9 } 10 }

Appvue

1 <p v-on:click="counterClick">カウンターアップ</p> 2 <p>{{counterState}}</p>

しかしcomputedの代わりにstore.js側のgettersで変更を感知し、そのままtemplateにthis.$store.getters.○○等と記載すれば同じように運用することが可能とわかったのですが、使い分けにルールなどあるのでしょうか?
それとも解釈が違うのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

computed property と Vuex getter は機能的にはほとんど同じで、computed property はその component でしか使えないのに対し、getter はどの component からも使えるという違いがあります。複数のコンポーネントで同じ computed property を定義すると無駄なので store の getter として定義する、という感じでいいと思います。

今の場合は、counterState は store のデータをそのまま返しているだけなので、getter にするにしても getter を使う意味がありません。getter は store のデータに何らかの変換を通したものを取り出せるようにするものです。
template 内で直接 $store.state.counter を使っても問題ないと思います。

しかしcomputedの代わりにstore.js側のgettersで変更を感知し

そもそも「変更を感知」するのに getter も computed も必要ありません。store のデータを template 内で直接参照しても、store が更新されたとき自動的に表示も更新されます。

投稿2018/11/21 11:17

karamarimo

総合スコア2551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

okpk

2018/11/21 11:34

前回に引き続き、今回も非常に丁寧に回答していただきありがとうございます。 「そもそも「変更を感知」するのに getter も computed も必要ありません。」 そうだったんですね..。試して見たら確認できました。 以前にstore関連で曖昧なまま作業中断した記憶が残っており、そのまま間違った知識として定着していました。 computedとgetterなども設計の段階でどう使うか先に決めると迷わなくなりそうですね。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問