我同时使用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。可以访问的东西 .．. ｝
其他回答
其实很简单:
watch: {
'$store.state.drawer': function() {
console.log(this.$store.state.drawer)
}
}
如果存储在一个模块中，使用:
'$store.state.myModule.drawer'
对于嵌套文件，使用:
'$store.state.fileOne.fileTwo.myModule.drawer'
通过观察和设置值变化来创建存储变量的Local状态。 这样，表单输入v-model的局部变量更改不会直接改变存储变量。
data() {
return {
localState: null
};
},
computed: {
...mapGetters({
computedGlobalStateVariable: 'state/globalStateVariable'
})
},
watch: {
computedGlobalStateVariable: 'setLocalState'
},
methods: {
setLocalState(value) {
this.localState = Object.assign({}, value);
}
}
如上所述，直接在商店中观察变化并不是一个好主意
但在一些非常罕见的情况下，它可能对某人有用，所以我将留下这个答案。其他情况请参见@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
我想提问者想用带有Vuex的手表。
this.$store.watch(
(state)=>{
return this.$store.getters.your_getter
},
(val)=>{
//something changed do something
},
{
deep:true
}
);
正如Gabriel所说，观察商店变化的最佳方法是使用mapGetters。 但在某些情况下，你不能通过mapGetters来实现，例如，你想从store中获取一些东西，使用parameter:
getters: {
getTodoById: (state, getters) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
在这种情况下，你不能使用mapGetters。你可以试着这样做:
computed: {
todoById() {
return this.$store.getters.getTodoById(this.id)
}
}
但不幸的是，todoById仅在以下情况下才会更新。Id改变了
如果你想更新你的组件在这种情况下使用。$store。腕表解决方案由龚提供。或者有意识地处理组件并更新它。当需要更新todoById时，使用todoById。
