Vue3搭配Vuex4开发时无法正常访问state变量是什么原因？

1. 异步执行顺序错位 #

dispatch调用的getGroup是异步方法，你没有等待请求执行完成就立即打印group，此时接口请求还未返回，axiosSingleDataSuccess mutation尚未触发，state中的group还是初始化的空对象，因此打印结果为空。

2. 取值方式未保留响应式 #

你在setup中直接执行const group = state.groupCrud.group，相当于把初始化的空对象赋值给了普通变量group，后续state更新时该变量不会自动同步最新值。如果需要响应式读取该值，需要用computed包裹：

import { computed } from 'vue'
// 其余逻辑省略
const group = computed(() => state.groupCrud.group)

3. Proxy对象的控制台懒求值特性 #

你看到打印的Proxy对象内部存在值，是浏览器控制台的懒求值机制导致：你点击展开Proxy对象时，浏览器才会读取对象的当前值，此时API请求已经完成、state已更新，因此能看到内部的实际值，但打印执行的时间点该值确实为空。

方案1：等待异步请求完成后再取值 #

onMounted(async () => {
  // 等待getGroup执行完成后再读取state
  await dispatch('getGroup', params.id);
  console.log(state.groupCrud.group);
})

方案2：监听group变化执行后续逻辑 #

如果不需要阻塞等待请求完成，可以通过watch监听group的更新：

import { watch } from 'vue'
// 其余逻辑省略
watch(group, (newGroupVal) => {
  console.log('group最新值：', newGroupVal)
  // 此处写入依赖group值的后续逻辑
})

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