Vuex store unwatch - vuex

Question

store.watch function returns the unwatch function as documentation described.
I need to watch my state for once. So, can I call unwatch function inside the watch method second parameter callback function or should I do it somewhere else ?
var unwatch = this.$store.watch(
state => state.foo,
() => {
someMethod();
unwatch(); // Is this work ?
}
)
PS: I could not understand watcher state, with logging it to console.

Answer 1

So, can I call unwatch function inside the watch method second parameter callback function or should I do it somewhere else ?
Answer:
Calling it inside the watch callback will work!
Here is a codesandbox example
In the example I have a count which is stored in vuex store and a localCount which is stored in the component's state.
Whenever the count in the store changes, I call a method to update the localCount. Successfully, the localCount updated only once:
The template:
<div id="app">
Local Count {{ localCount }}
<hr>
store count {{ $store.state.count }}
<hr>
<button #click="increase">Increase</button>
</div>
The script:
data: () => ({
localCount: 0
}),
created() {
const unwatch = this.$store.watch(
state => state.count,
() => {
this.myMethod();
unwatch();
}
);
},
methods: {
myMethod() {
this.localCount++;
},
increase() {
this.$store.commit("increase");
}
}
When and where to call the unwatch function it depends on you needs. You can even store the unwatch function to the vue instance and when you don't want to watch anymore you can do this.unwatch():
this.unwatch = this.$store.watch(
state => state.foo,
() => {
someMethod();
}
)