我同时使用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组件?
当前回答
我想提问者想用带有Vuex的手表。
this.$store.watch(
(state)=>{
return this.$store.getters.your_getter
},
(val)=>{
//something changed do something
},
{
deep:true
}
);
其他回答
当你想要在状态级别上观看时，可以这样做:
let App = new Vue({
//...
store,
watch: {
'$store.state.myState': function (newVal) {
console.log(newVal);
store.dispatch('handleMyStateChange');
}
},
//...
});
如上所述，直接在商店中观察变化并不是一个好主意
但在一些非常罕见的情况下，它可能对某人有用，所以我将留下这个答案。其他情况请参见@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
这是为所有的人，不能解决他们的问题与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
}
}
})
您可以使用Vuex操作、getter、计算属性和监视器的组合来侦听Vuex状态值的变化。
HTML代码:
<div id="app" :style='style'>
<input v-model='computedColor' type="text" placeholder='Background Color'>
</div>
JavaScript代码:
'use strict'
Vue.use(Vuex)
const { mapGetters, mapActions, Store } = Vuex
new Vue({
el: '#app',
store: new Store({
state: {
color: 'red'
},
getters: {
color({color}) {
return color
}
},
mutations: {
setColor(state, payload) {
state.color = payload
}
},
actions: {
setColor({commit}, payload) {
commit('setColor', payload)
}
}
}),
methods: {
...mapGetters([
'color'
]),
...mapActions([
'setColor'
])
},
computed: {
computedColor: {
set(value) {
this.setColor(value)
},
get() {
return this.color()
}
},
style() {
return `background-color: ${this.computedColor};`
}
},
watch: {
computedColor() {
console.log(`Watcher in use @${new Date().getTime()}`)
}
}
})
参见JSFiddle演示。
其实很简单:
watch: {
'$store.state.drawer': function() {
console.log(this.$store.state.drawer)
}
}
如果存储在一个模块中，使用:
'$store.state.myModule.drawer'
对于嵌套文件，使用:
'$store.state.fileOne.fileTwo.myModule.drawer'
