☰

vuex からストア値を監視するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript vue.js vuejs2 vuex
vuex からストア値を監視するにはどうすればいいですか? 質問する

vuexとを一緒に使っていますvuejs 2。

私は初心者ですがvuex、変数の変化を観察したいと思いますstore。

私はwatch自分のvue component

これまでのところ、次のものがあります:

import Vue from 'vue';
import {
  MY_STATE,
} from './../../mutation-types';

export default {
  [MY_STATE](state, token) {
    state.my_state = token;
  },
};

何か変更があったかどうか知りたいmy_state

store.my_stateVuejs コンポーネントで監視するにはどうすればよいですか?

ベストアンサー1

たとえば、果物のバスケットがあり、バスケットに果物を追加したり、バスケットから果物を取り除いたりするたびに、(1) 果物の数に関する情報を表示したいが、 (2) 果物の数を何らかの方法で通知したいとします...

フルーツカウントコンポーネント.vue

<template>
  <!-- We meet our first objective (1) by simply -->
  <!-- binding to the count property. -->
  <p>Fruits: {{ count }}</p>
</template>

<script>
import basket from '../resources/fruit-basket'

export default () {
  computed: {
    count () {
      return basket.state.fruits.length
      // Or return basket.getters.fruitsCount
      // (depends on your design decisions).
    }
  },
  watch: {
    count (newCount, oldCount) {
      // Our fancy notification (2).
      console.log(`We have ${newCount} fruits now, yay!`)
    }
  }
}
</script>

オブジェクト内の関数の名前はwatch、オブジェクト内の関数の名前と一致する必要があることに注意してくださいcomputed。上記の例では、名前は ですcount。

監視対象プロパティの新しい値と古い値は、監視コールバック (count 関数) にパラメーターとして渡されます。

バスケット ストアは次のようになります。

フルーツバスケット.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const basket = new Vuex.Store({
  state: {
    fruits: []
  },
  getters: {
    fruitsCount (state) {
      return state.fruits.length
    }
  }
  // Obviously you would need some mutations and actions,
  // but to make example cleaner I'll skip this part.
})

export default basket

詳細については、次のリソースをご覧ください。

おすすめ記事