Nuxt项目使用Vuex时出现this.$store is undefined错误求助

问题场景 #

在Nuxt项目中配置Vuex store后，页面组件调用this.$store时出现undefined错误，相关代码如下：

store/index.js 原代码 #

export const state = () => ({
    userdata: {}
})

export const mutations = {
    setUserdata(state, value){
        state.userdata = value
    }
}

export const getters = {
    GetUserdata(state){ return state.userdata}
}

pages/login.vue 原脚本 #

import Vue from 'vue'
export default Vue.extend({
    name: 'LoginSuccessPage',
    async created() {
        var token = this.$route.query.token
        var data = await fetch("http://localhost:3500/profile/"+token)
        var jsondata = await data.json()
        this.$store.dispatch("userdata",jsondata)
     }
})

错误原因分析 #

1. 组件创建方式错误：Nuxt页面组件无需用Vue.extend()包裹，这种写法会导致组件无法正确获取Nuxt注入的上下文（包括$store）。
2. Vuex调用逻辑错误：代码中调用this.$store.dispatch("userdata")，但store里未定义名为userdata的action；若要直接修改state，需使用commit而非dispatch触发mutation。

修复步骤及代码示例 #

1. 调整store/index.js，补充action（或直接使用mutation） #

如果需要后续扩展异步逻辑，添加actions部分：

export const state = () => ({
    userdata: {}
})

export const mutations = {
    setUserdata(state, value){
        state.userdata = value
    }
}

export const getters = {
    GetUserdata(state){ return state.userdata}
}

// 添加action触发mutation
export const actions = {
  setUserdata({ commit }, value) {
    commit('setUserdata', value)
  }
}

2. 修改pages/login.vue脚本，移除Vue.extend并修正store调用 #

export default {
    name: 'LoginSuccessPage',
    async created() {
        const token = this.$route.query.token
        const response = await fetch(`http://localhost:3500/profile/${token}`)
        const jsondata = await response.json()
        
        // 方式一：调用action（推荐，便于后续扩展）
        this.$store.dispatch('setUserdata', jsondata)
        
        // 方式二：无需action逻辑时，直接commit mutation
        // this.$store.commit('setUserdata', jsondata)
     }
}

关键说明 #

• Nuxt会自动识别store目录下的文件并初始化Vuex，无需额外配置，确保store文件结构正确即可。
• 页面组件直接导出配置对象即可，Nuxt会自动处理组件创建与上下文注入。

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