vuex 中的 store 和 $store 的区别

最新推荐文章于 2025-10-16 17:20:14 发布

原创最新推荐文章于 2025-10-16 17:20:14 发布 · 2.2w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#$store 和 store

vue2.x 专栏收录该内容

39 篇文章

订阅专栏

本文详细解析了在Vue.js框架中，如何在组件内正确使用$store和this.$store来访问Vuex状态管理中的数据。阐述了$store作为Vue原型上的属性，可以直接在模板中通过{{$store.state.userName}

<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>

$store 是挂载在 Vue 实例上的（即Vue.prototype），而组件也其实是一个Vue实例，在组件中可使用 this 访问原型上的属性，template 拥有组件实例的上下文，可直接通过 {{ $store.state.userName }} 访问，等价于 script 中的 this.$store.state.userName。
至于 {{ store.state.userName }}，script 中的 data 需声明过 store 才可访问。