Vue在.js文件中怎么引入store和router

在Vue.js项目中，store和router是两个非常重要的概念。store通常用于管理应用的状态，而router则用于管理应用的页面路由。在Vue组件中，我们可以通过this.$store和this.$router来访问它们。然而，在某些情况下，我们可能需要在普通的.js文件中引入store和router，例如在工具函数、API请求拦截器或全局事件监听器中。

1. 引入store

在Vue项目中，store通常是通过Vuex来管理的。要在.js文件中引入store，首先需要确保store已经被创建并导出。假设你的store定义在src/store/index.js文件中：

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // 状态定义
  },
  mutations: {
    // 变更状态的方法
  },
  actions: {
    // 异步操作
  },
  getters: {
    // 计算属性
  }
});

然后，在.js文件中，你可以通过以下方式引入store：

// src/utils/someUtility.js
import store from '@/store';

export function someUtilityFunction() {
  const state = store.state;
  store.dispatch('someAction');
  // 其他操作
}

2. 引入router

router通常是通过Vue Router来管理的。假设你的router定义在src/router/index.js文件中：

// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    // 其他路由
  ]
});

在.js文件中，你可以通过以下方式引入router：

// src/utils/someUtility.js
import router from '@/router';

export function someUtilityFunction() {
  router.push({ name: 'Home' });
  // 其他操作
}

3. 结合使用store和router

在某些情况下，你可能需要同时使用store和router。例如，在API请求拦截器中，你可能需要根据store中的状态来决定是否跳转到登录页面：

// src/utils/apiInterceptor.js
import store from '@/store';
import router from '@/router';

export function setupApiInterceptor() {
  axios.interceptors.response.use(
    response => response,
    error => {
      if (error.response.status === 401) {
        store.dispatch('logout');
        router.push({ name: 'Login' });
      }
      return Promise.reject(error);
    }
  );
}

总结

在Vue项目中，store和router是全局状态管理和路由管理的核心。通过在.js文件中引入它们，你可以在任何地方访问和操作应用的状态和路由。无论是工具函数、API拦截器还是全局事件监听器，合理地使用store和router都能让你的代码更加模块化和可维护。