私は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
を監視するには?
コンポーネントのウォッチャーを使って状態の変化を聞くべきではありません。ゲッター関数を使って、それをコンポーネント内にマッピングすることをお勧めします。
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
**前述のように、変更点を直接店頭で見るのはよくありません。
ただし、ごく稀に誰かの役に立つ場合もあるので、この回答を残しておきます。その他のケースについては、@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
vueコンポーネントでmapStateを使用して、ストアから直接ステートを取得することもできます。
あなたのコンポーネントで
computed: mapState([
'my_state'
])
ここで my_state
はストアの変数です。