javascript - vuex 中的 store 和 $store 的差別

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>

一直搞不清楚 vuex 中 store 和 $store 的區別，也不知道什麼時候前面應該加this,求大神告知。
—— thanks in advance

Answer 1

$store 是掛載在Vue 實例上的（即Vue.prototype），而元件也其實是一個Vue實例，在元件中可使用this 存取原型上的屬性，template 擁有元件實例的上下文，可直接透過{{ $store.state.userName }} 訪問，等價於script 中的this.$store.state.userName。
至於 {{ store.state.userName }}，script 中的 data 需要宣告過 store 才可存取。