我同时使用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组件?
当前回答
你也可以订阅商店突变:
store.subscribe((mutation, state) => {
console.log(mutation.type)
console.log(mutation.payload)
})
https://vuex.vuejs.org/api/#subscribe
其他回答
您可以使用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演示。
你不应该使用组件的监视器来监听状态的变化。我建议您使用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
我想提问者想用带有Vuex的手表。
this.$store.watch(
(state)=>{
return this.$store.getters.your_getter
},
(val)=>{
//something changed do something
},
{
deep:true
}
);
在computed中使用你的getter，然后观察它并做你需要做的事情
computed:{
...mapGetters(["yourGetterName"])
},
watch: {
yourGetterName(value) {
// Do something you need
},
}
通过观察和设置值变化来创建存储变量的Local状态。 这样，表单输入v-model的局部变量更改不会直接改变存储变量。
data() {
return {
localState: null
};
},
computed: {
...mapGetters({
computedGlobalStateVariable: 'state/globalStateVariable'
})
},
watch: {
computedGlobalStateVariable: 'setLocalState'
},
methods: {
setLocalState(value) {
this.localState = Object.assign({}, value);
}
}
