我正在使用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_state在我的 vuejs 组件中观看？
例如，假设您有一篮子水果，每次从篮子中添加或移除水果时，您希望 (1) 显示有关水果数量的信息，但您还希望 (2) 收到通知以某种奇特的方式计算水果的数量……
水果计数component.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.
监视属性的新旧值将作为参数传递到监视回调（计数函数）中。
篮子商店可能看起来像这样：
水果篮.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
您可以在以下资源中阅读更多内容：
这很简单：
watch: {
'$store.state.drawer': function() {
console.log(this.$store.state.drawer)
}
}
你不应该使用组件的观察者来监听状态变化。我建议您使用 getter 函数，然后将它们映射到您的组件中。
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
我认为提问者想将 watch 与 Vuex 一起使用。
this.$store.watch(
(state)=>{
return this.$store.getters.your_getter
},
(val)=>{
//something changed do something
},
{
deep:true
}
);