NuxtJS Vue应用Store使用最佳实践：API调用是否需要走Vuex

首先明确：不存在「所有API调用都必须走Vuex」的硬性要求，具体方案可以根据数据的使用场景选择，两种方式各有适用边界：

直接在页面asyncData/fetch钩子中调用API的适用场景 #

• 数据仅为当前页面私有，无跨页面、跨组件共享需求，比如单篇文章详情、活动页专属配置等，这类数据直接在页面钩子中调用即可，无需额外编写Vuex的模板代码，逻辑更直观，维护成本更低。
• 数据为一次性渲染使用，无后续状态更新、联动交互需求，直接调用接口返回后注入页面渲染即可，不需要长期存储在全局状态中占用内存。

示例代码：

<script>
// pages/article/_id.vue
export default {
  async asyncData({ $axios, params }) {
    // 直接调用文章详情接口
    const { data: articleDetail } = await $axios.get(`/api/article/${params.id}`)
    // 返回的数据会直接注入页面实例
    return { articleDetail }
  }
}
</script>

API调用封装到Vuex Store中的优势与适用场景 #

当你的数据满足以下任意特征时，更推荐走Store统一管理：

• 数据需要跨多页面、多组件共享：比如用户登录态信息、全局站点配置、购物车数据等，这类数据如果每个用到的页面都单独调用接口，会造成不必要的重复请求，还容易出现不同模块数据不一致的问题，在Store中统一请求、存储，全应用复用同一份数据，还能统一处理更新逻辑。
• 存在复杂的状态处理逻辑：比如接口返回数据需要统一二次加工、多接口依赖联动、需要做接口请求缓存避免重复调用等，封装到Store的Action中可以实现逻辑复用，不需要每个调用方重复编写接口处理、异常捕获逻辑。
• 需要做状态持久化：比如用户浏览历史、使用偏好等数据，结合Vuex持久化插件可以实现全局统一的存储、读取逻辑，无需每个页面单独处理本地存储逻辑。

示例代码：

// store/user.js 全局用户状态管理
export const state = () => ({
  userInfo: null
})

export const mutations = {
  SET_USER_INFO(state, payload) {
    state.userInfo = payload
  }
}

export const actions = {
  async fetchUserInfo({ commit, state }) {
    // 已有数据时直接复用，避免重复请求
    if (state.userInfo) return state.userInfo
    const { data } = await this.$axios.get('/api/user/info')
    commit('SET_USER_INFO', data)
    return data
  }
}

页面中使用：

<script>
export default {
  async fetch({ store }) {
    // 调用Store中封装的接口方法
    await store.dispatch('user/fetchUserInfo')
  },
  computed: {
    // 从全局状态取数据
    userInfo() {
      return this.$store.state.user.userInfo
    }
  }
}
</script>

通用实践建议 #

• 不要为了遵循教程而强行使用Vuex，优先按数据的使用范围做拆分：全局共享数据走Store，页面私有数据直接在页面内调用即可。
• 建议单独封装统一的API请求层，不管是在页面中直接调用还是在Store中调用，都复用同一套接口定义、参数处理、异常捕获逻辑，避免重复代码。

内容的提问来源于stack exchange，提问作者cissharp