Vuex模块中route.params.activityId未定义问题求助

让我们一步步拆解你的问题，找到根源并解决它：

问题核心原因 #

你遇到的undefined问题主要是时机不对加上代码逻辑的小错误：

1. Vuex模块初始化时，路由还没完成跳转，直接读取router.currentRoute.params或者导入组件变量，自然拿不到有效数据
2. 你的action没有接收参数，无法传递实际的activityId
3. getter的路径指向错误，导致无法正确读取state值

具体解决方案 #

1. 修正Vuex的activity模块代码

首先调整你的activity.js，把初始值设为null，修正action参数和getter：

const state = { 
  currentActivityId: null // 初始化为null，不要在这里直接绑路由
} 

const mutations = { 
  SET_CURRENT_ACTIVITY_ID: (state, currentActivityId) => { 
    state.currentActivityId = currentActivityId 
  } 
} 

const actions = { 
  // 新增activityId参数，用来接收组件传递的ID
  setCurrentActivityId({ commit }, activityId) { 
    return new Promise(resolve => { 
      commit('SET_CURRENT_ACTIVITY_ID', activityId) 
      resolve() 
    }) 
  } 
} 

const getters = {
  // 正确指向当前模块的currentActivityId（之前的路径写错了）
  currentActivityId: state => state.currentActivityId
}

export default { 
  namespaced: true, 
  state, 
  mutations, 
  actions,
  getters
}

2. 在组件中调用action传递activityId

因为你已经用vuex-router-sync同步了路由和store，组件里可以直接读取路由参数，然后传递给Vuex的action：

async created() { 
  // 这里不需要await，同步读取即可
  const activityId = this.$store.state.route.params.activityId 
  console.log("here activityId: ", activityId) 

  // 注意：因为模块开启了namespaced，调用action要加模块前缀
  await this.$store.dispatch('activity/setCurrentActivityId', activityId)

  // 验证是否设置成功
  console.log("Current ID from store: ", this.$store.getters['activity/currentActivityId'])
}

3. 可选：自动监听路由变化更新ID

如果希望路由切换时自动更新currentActivityId，可以在store的入口文件（比如store/index.js）里添加路由监听：

import Vue from 'vue'
import Vuex from 'vuex'
import { sync } from 'vuex-router-sync'
import router from '@/router'
import activity from './modules/activity'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    activity
  }
})

sync(store, router)

// 路由切换后自动更新活动ID
router.afterEach((to) => {
  const activityId = to.params.activityId || null
  store.dispatch('activity/setCurrentActivityId', activityId)
})

export default store

为什么之前的方法无效？ #

• 直接导入组件的activityId：组件还没实例化，这个变量根本不存在，所以是undefined
• 模块初始化时读取router.currentRoute：此时路由还停留在初始状态，还没完成目标页面的跳转，自然拿不到activityId
• 原action没有参数：即使调用了，也只能把currentActivityId设为空字符串，无法传递实际值

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