javascript - The difference between store and $store in vuex

Question

<router-link to="/login">{{ $store.state.userName }}</router-link>
<router-link to="/login">{{ store.state.userName }}</router-link>
<router-link to="/login">{{ this.store.state.userName }}</router-link>
<router-link to="/login">{{ this.$store.state.userName }}</router-link>

I have never been able to figure out the difference between store and $store in vuex, and I don’t know when to add this in front of it. Please let me know.
—— thanks in advance

Answer 1

$store is mounted on the Vue instance (i.e. Vue.prototype), and the component is actually a Vue instance. You can use this in the component to access the properties on the prototype. The template has the context of the component instance. It can be accessed directly through {{ $store.state.userName }}, which is equivalent to this.$store.state.userName in script.
As for {{ store.state.userName }}, the data in the script must be declared store before it can be accessed.