Vue3+Vuex中mounted阶段取数：使用getter还是发起Http Get请求？

1. 页面加载时触发Vuex取数的最佳钩子 #

优先选择created钩子：

• created阶段组件实例已完成初始化，可正常访问实例上下文调用Vuex方法，比mounted更早触发请求，能缩短用户等待数据加载的时间
• 除非请求参数依赖DOM节点信息，否则不需要等到DOM渲染完成的mounted阶段再发起请求，无意义延长加载周期

2. 两种尝试失效的原因 #

第一种尝试（仅用mapGetters）失效原因 #

你只完成了从Vuex取数据的映射，但没有触发请求数据的Action：

• Vuex不会主动发起接口请求，你必须手动调用对应Action，请求成功后数据提交到state，getter才能拿到返回值
• 还可能存在几个潜在配置问题：
  • 你使用了模块化Vuex（mapGetters第一个参数为competitor），需要确认对应模块已开启namespaced: true
  • 要确认state中的competitor初始值已声明为空数组[]，否则调用push方法会直接报错
  • mutation中使用map遍历插入数据语义错误，map是用来生成新数组的方法，遍历操作应该用forEach，或者更高效的写法直接解构插入：state.competitor.push(...payload)
  • 模板中v-for的key绑定为data本身，如果data是对象类型会触发Vue警告，建议绑定数据唯一标识比如data.id

第二种尝试（遍历mapActions映射的方法）失效原因 #

mapActions映射的是可调用的方法，不是存储数据的响应式变量，直接把方法当成数组遍历当然不会有任何结果。

正确实现示例 #

组件代码 #

import { mapGetters, mapActions } from 'vuex'
// 导入你定义的Vuex常量
import { GET_COMPETITOR, GET_COMPETITOR_ACTION_DATA } from './vuex/constant'

export default {
  computed: {
    ...mapGetters('competitor', {
      competitor: GET_COMPETITOR
    })
  },
  methods: {
    ...mapActions('competitor', {
      getCompetitorData: GET_COMPETITOR_ACTION_DATA
    })
  },
  created() {
    // 组件创建后立刻触发请求拉取数据
    this.getCompetitorData()
  }
}

模板部分不用修改，建议调整key绑定：

<ul> 
  <li v-for="data in competitor" :key="data.id">
    {{ data.name }}
  </li>
</ul>

Vuex侧优化建议 #

1. state初始化：

state: {
  competitor: []
}

2. mutation优化：

[GET_COMPETITOR_MUTATION_DATA](state,payload){ 
  // 若需要覆盖旧数据则直接赋值：state.competitor = payload
  state.competitor.push(...payload)
}

3. Action返回Promise方便后续处理加载、错误状态：

[GET_COMPETITOR_ACTION_DATA](context) { 
  return axiosinstance.get('competitors').then(res => {
    context.commit(GET_COMPETITOR_MUTATION_DATA, res.data); 
  }).catch(err => {
    console.log(err)
    throw err
  });
}

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