vue中store.state、$store.state和this.$store.state的适用场景

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

在 Vue.js 应用中，store.state, $store.state, 和 this.$store.state 都是访问 Vuex 存储状态的方法，但它们的使用场景和上下文有所不同：

1. store.state

   • 适用场景：通常在非组件的上下文中使用，比如在 Vuex 的模块、actions、mutations 或者插件中。
   • 描述：直接引用 Vuex store 实例的 state 对象。这种方式不依赖于 Vue 组件实例的上下文。
   • 例子：

     // Vuex action
     actions: {
       someAction({ state }) {
         console.log(state.someValue);
       }
     }
     

2. $store.state

   • 适用场景：在 Vue 组件之外的任何地方，如 Vuex 的 getter 或者普通 JavaScript 文件中，当需要访问 Vuex store 的状态时。
   • 描述：这是从任何 Vue 应用程序的上下文中访问 Vuex store 的通用方式。它通过 Vue 实例的原型链访问 Vuex store。
   • 例子：

     import { mapState } from 'vuex';
     
     const someModule = {
       computed: mapState(['someValue']),
       created() {
         console.log(this.$store.state.someValue);
       }
     }
     

3. this.$store.state

   • 适用场景：在 Vue 组件的方法、生命周期钩子或计算属性中，当需要访问 Vuex store 的状态时。
   • 描述：这是在 Vue 组件实例的上下文中访问 Vuex store 的方式。this 关键字指向当前 Vue 组件实例，而 $store 则是 Vue 应用程序中注入的 Vuex store。
   • 例子：

     <template>
       <div>{{ someValue }}</div>
     </template>
     
     <script>
     export default {
       computed: {
         someValue() {
           return this.$store.state.someValue;
         }
       }
     }
     </script>
     

总结

• store.state 直接在 Vuex 的模块、actions 或 mutations 中使用，不需要通过 Vue 组件实例。
• $store.state 和 this.$store.state 都是在 Vue 组件的上下文中访问 Vuex store 的状态，区别在于 this.$store.state 明确指出了当前的上下文是 Vue 组件实例。

通常情况下，在组件内部，推荐使用 this.$store.state，而在非组件的上下文中（如 Vuex 的模块定义、actions、mutations 或 getters）使用 store.state 更为合适。