vuejs 2 vuexからストアの値を監視する方法

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

私は vuex の初心者で、store 変数の変化を監視したいと思っています。

私の vue component に watch 関数を追加したいと思います。

これは私が今までに持っているものです。

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

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

my_state` に何か変更があったかどうかを知りたい。

vuejs のコンポーネントで store.my_state を監視するには？

Xquick
編集された質問 5日 11月 2018 в 5:50
プログラミング
javascript vue.js vuejs2 vuex
7日 4月 2017 в 5:13
23 ビュー

コンポーネントのウォッチャーを使って状態の変化を聞くべきではありません。ゲッター関数を使って、それをコンポーネント内にマッピングすることをお勧めします。

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      myState: 'getMyState'
    })
  }
}

あなたのお店では

const getters = {
  getMyState: state => state.my_state
}

コンポーネントで this.myState を使用すれば、ストアに加えられた変更をリッスンできるはずです。

https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper

smunk
編集した答え 13日 3月 2018 в 4:44
解説 (9)

**前述のように、変更点を直接店頭で見るのはよくありません。

ただし、ごく稀に誰かの役に立つ場合もあるので、この回答を残しておきます。その他のケースについては、@gabriel-robertの回答を参照してください。

これは、state.$watchで行うことができます。コンポーネントの created (または、これを実行する必要がある場所) メソッドにこれを追加します。

this.$store.watch(
    function (state) {
        return state.my_state;
    },
    function () {
        //do something on data change
    },
    {
        deep: true //add this if u need to watch object properties change etc.
    }
);

詳細はこちらをご覧ください。https://vuex.vuejs.org/api/#watch

Nic Scozzaro
編集した答え 18日 9月 2019 в 7:05
解説 (3)

vueコンポーネントでmapStateを使用して、ストアから直接ステートを取得することもできます。

あなたのコンポーネントで

computed: mapState([
  'my_state'
])

ここで my_state はストアの変数です。

Eugene Kulakov
編集した答え 8日 4月 2017 в 7:41
解説 (0)