我同时使用vuex和vuejs 2。
我是vuex的新手，我想看一个商店变量的变化。
我想在我的vue组件中添加手表功能
这是我目前所拥有的:
import Vue from 'vue';
import {
MY_STATE,
} from './../../mutation-types';
export default {
[MY_STATE](state, token) {
state.my_state = token;
},
};
我想知道my_state是否有任何变化
我怎么看店。My_state在我的vuejs组件?
当前回答
如果你使用typescript，那么你可以:
import {Watch} from "vue-property-decorator"; ．． @Watch (" $ store.state.something”) private watchSomething() { //使用这个。$store.state。可以访问的东西 .．. ｝
其他回答
在computed中使用你的getter，然后观察它并做你需要做的事情
computed:{
...mapGetters(["yourGetterName"])
},
watch: {
yourGetterName(value) {
// Do something you need
},
}
如上所述，直接在商店中观察变化并不是一个好主意
但在一些非常罕见的情况下，它可能对某人有用，所以我将留下这个答案。其他情况请参见@gabriel-robert answer
你可以通过州政府，$watch。将此添加到组件中创建的(或需要执行此方法的地方)方法中
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
比如说，你有一篮水果， 每次你从篮子里添加或取出一个水果，你 想要(1)显示有关水果数量的信息，但你也(2)想要以某种奇特的方式通知水果的数量…
fruit-count-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>
请注意，监视对象中的函数名必须与计算对象中的函数名匹配。在上面的例子中，名字是count。
被监视属性的新值和旧值将作为参数传递到监视回调(count函数)。
篮子商店可以是这样的:
fruit-basket.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
你可以在以下资源中阅读更多:
计算属性和监视器 API文档:计算 API文档:观察
你不应该使用组件的监视器来监听状态的变化。我建议您使用getter函数，然后在组件中映射它们。
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters({
myState: 'getMyState'
})
}
}
在你的店里:
const getters = {
getMyState: state => state.my_state
}
您应该能够通过使用此功能侦听对您的商店所做的任何更改。myState在你的组件。
https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper
如果你使用typescript，那么你可以:
import {Watch} from "vue-property-decorator"; ．． @Watch (" $ store.state.something”) private watchSomething() { //使用这个。$store.state。可以访问的东西 .．. ｝
