我同时使用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组件?
当前回答
在computed中使用你的getter，然后观察它并做你需要做的事情
computed:{
...mapGetters(["yourGetterName"])
},
watch: {
yourGetterName(value) {
// Do something you need
},
}
其他回答
你也可以使用debouncedWatch (vue使用函数)安全地观看它
debouncedWatch(
lines,
() => {
console.log('changed');
},
500,
);
这是为所有的人，不能解决他们的问题与getter，实际上真的需要一个监视器，例如，与非Vue第三方的东西(见Vue监视器何时使用监视器)。
Vue组件的监视器和计算值也都适用于计算值。所以vuex也没有什么不同:
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['somestate']),
someComputedLocalState() {
// is triggered whenever the store state changes
return this.somestate + ' works too';
}
},
watch: {
somestate(val, oldVal) {
// is triggered whenever the store state changes
console.log('do stuff', val, oldVal);
}
}
}
如果只是结合本地和全局状态，mapState的文档也提供了一个例子:
computed: {
...mapState({
// to access local state with `this`, a normal function must be used
countPlusLocalState (state) {
return state.count + this.localCount
}
}
})
在computed中使用你的getter，然后观察它并做你需要做的事情
computed:{
...mapGetters(["yourGetterName"])
},
watch: {
yourGetterName(value) {
// Do something you need
},
}
您还可以在vue组件中使用mapState来直接从存储中获取状态。
在你的组件中:
computed: mapState([
'my_state'
])
其中my_state是存储中的变量。
我使用的一个非常简单的计算方法是这样的。也许这对你有帮助。
const variable_name = computed(
() => store.state.[name_of_state].property_name
);
你可以这样做的另一个版本是
computed: {
name () {
return this.$store.state.[name_of_state].property
}
}
这是从存储中访问getter的一种格式。 希望你今天过得愉快。
