Vue如何在js中获取store

在Vue中，获取store的方式有很多种，以下是几种常见的方法：1、通过this.$store获取，2、通过import直接导入，3、通过setup函数获取。其中，通过this.$store获取是最常用且便捷的方法。在Vue组件的实例中，可以通过this.$store直接访问到Vuex的store实例。这种方法适用于大多数的场景，尤其是在使用Options API时非常方便。

一、通过this.$store获取

在Vue组件的实例中，可以通过this.$store直接访问到Vuex的store实例。以下是具体的步骤：

在Vue组件中，使用this.$store访问store。
可以通过this.$store.state访问state中的数据。
可以通过this.$store.commit提交mutation。
可以通过this.$store.dispatch分发action。

<template>
  <div>
    {{ count }}
  </div>
</template>
<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    }
  }
}
</script>

二、通过import直接导入

在某些情况下，例如在非组件文件中，需要直接导入store。这时可以通过import的方式导入store实例：

在store.js中定义并导出store实例。
在需要使用store的文件中，直接import该store实例。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

// someFile.js
import store from './store';
store.commit('increment');
console.log(store.state.count); // 打印出更新后的count值

三、通过setup函数获取

在使用Vue 3的Composition API时，可以在setup函数中通过useStore来获取store实例：

首先需要从vuex中导入useStore。
在setup函数中调用useStore获取store实例。

<template>
  <div>
    {{ count }}
  </div>
</template>
<script>
import { useStore } from 'vuex';
import { computed } from 'vue';
export default {
  setup() {
    const store = useStore();
    const count = computed(() => store.state.count);
    const increment = () => {
      store.commit('increment');
    };
    return {
      count,
      increment
    };
  }
}
</script>

四、通过全局对象访问

在某些特殊情况下，可以将store挂载到全局对象上，这样在任何地方都可以访问到store：

在main.js中将store挂载到Vue原型上。
在任何地方通过Vue.prototype.$store访问store。

// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';
Vue.prototype.$store = store;
new Vue({
  render: h => h(App),
}).$mount('#app');

// someFile.js
import Vue from 'vue';
Vue.prototype.$store.commit('increment');
console.log(Vue.prototype.$store.state.count); // 打印出更新后的count值

总结与建议

通过上述方法，我们可以在不同的场景下灵活地获取Vuex store实例。1、通过this.$store获取是最常用的方法，适合大多数情况，尤其是在使用Options API时。2、通过import直接导入适用于非组件文件中需要访问store的情况。3、通过setup函数获取适用于Vue 3的Composition API。4、通过全局对象访问适用于需要在任何地方访问store的特殊情况。

建议开发者根据具体的应用场景选择适合的方法，确保代码的可读性和可维护性。在大型应用中，合理组织store的访问方式，能够提高代码的结构性和一致性。