Vue3与Vuex4使用时出现Cannot read properties of undefined (reading 'state')错误求助

这个问题我之前排查过好多次，根源其实出在你main.js里的插件注册方式上，咱们一步步来解决：

问题核心 #

你尝试通过一次app.use()调用同时注册路由和Vuex store，但Vue的use()方法每次只能处理一个插件，第二个参数会被当作第一个插件的配置选项，而不是第二个插件。这就导致你的Vuex store根本没被正确注入到应用中，组件里用useStore()拿到的是undefined，自然访问store.state就会抛出那个错误。

步骤1：修正main.js的插件注册 #

把use()调用拆成链式调用，分别注册路由和store：

import { createApp} from 'vue'
import App from './App.vue'
import router from './router'
import { createStore } from 'vuex';

const store = createStore({
 state(){
  return{
   message: 'hello'
  }
 }
})

// 改为链式调用，每个use注册一个插件
createApp(App)
  .use(router)
  .use(store)
  .mount('#app');

步骤2：完善App.vue的代码（可选但实用） #

你的App.vue里return的是空对象，要是想在模板里使用message，得把它return出去；另外可以加个可选链判断，防止类似的注入问题再次发生：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'App',
  setup(){
    const store = useStore();
    // 用可选链做兜底，避免store未注入时直接报错
    const message = computed(() => store?.state?.message || '默认消息');
    
    console.log(message.value);
    // 必须返回message，模板才能访问到
    return{
      message
    }
  }
}
</script>

再解释下为什么之前的写法不对 #

Vue的app.use(plugin, options)方法的第二个参数是给第一个插件的配置参数，不是第二个插件。你之前的use(router, store)相当于把store当成路由的配置传给了vue-router，而Vuex store完全没被注册到应用里，组件内的useStore()自然拿不到实例，就抛出了undefined的错误。

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