Vue3组合式API中使用Vuex获取userId失败排查求助

你当前代码存在几处关键错误，导致Vuex无法正常工作，以下是具体问题和修正方案：

一、main.js 中的错误 #

1. 错误地将Vuex store定义写在main.js中，且错误使用use(vuex)而非创建好的store实例
2. 重复导入vuex包，导出store的方式不符合规范

修正后的文件结构： #

1. 单独创建 store.js 文件

import { createStore } from 'vuex'

export default createStore({
  state: {
    Id: 'User'
  },
  mutations: {
    setId(state, id) {
      state.Id = id
    }
  },
  actions: {}
})

2. 修改 main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap'
import store from './store' // 导入创建好的store实例

createApp(App).use(router).use(store).mount('#app')

二、App.vue 中的错误 #

1. 注释了useStore()的正确用法，直接导入store文件不符合组合式API最佳实践
2. onMounted箭头函数写法存在转义错误（原代码中=>被转成>）
3. 未处理localStorage.getItem('Id')返回null的情况

修正后的App.vue #

<script>
import { onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import HomeView from './views/HomeView.vue'

export default {
  name: 'App',
  components: {
    HomeView
  },
  setup() {
    const store = useStore()
    const user = ref({
      userId: localStorage.getItem('Id') || ''
    })

    console.log("adsdad")
    
    onMounted(() => {
      if (user.value.userId) {  
        store.commit('setId', user.value.userId)
        console.log('ID已设置:', store.state.Id)
      }
    })
  }
}
</script>

关键说明 #

• Vue3中使用Vuex必须通过useStore()在组合式API的setup中获取store实例，确保和组件实例绑定
• 必须将创建好的store实例通过app.use(store)挂载到Vue应用上，而非挂载Vuex包本身
• 检查localStorage中是否存在Id键，避免传入null导致state异常

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