Nuxt JS 2.9中Vuex数据切换页面无法实时刷新问题求助

你遇到的是Vue响应式系统的典型问题——直接通过数组索引修改元素时，Vue无法自动检测到这个变化，导致页面不会触发重新渲染来展示新状态。咱们来一步步解决它：

方案1：修改Vuex Mutation，确保响应式更新 #

Vue对数组的响应式监听并不覆盖「直接通过索引赋值」的操作（比如你原来写的state.toolbarData[0] = settings），但可以用Array.splice()方法替换数组元素，这样Vue就能捕捉到变化了：

export const mutations = {
  /* * Toolbar data */
  setToolbar (state, data) {
    const settings = { name: data.name != null ? data.name : '' }
    // 用splice替换数组第一个元素，触发响应式更新
    state.toolbarData.splice(0, 1, settings)
  }
}

方案2：将toolbarData改为对象（更简洁的优化方案） #

既然你的toolbar数据只有一个条目，完全没必要用数组存储，改成对象会更直观，而且Vue能完美检测对象属性的修改：

第一步：修改Vuex State #

export const state = () => ({ 
  toolbarData: { name: 'Homepage' } 
})

第二步：修改Mutation #

export const mutations = {
  /* * Toolbar data */
  setToolbar (state, data) {
    // 直接修改对象属性，Vue会自动监听
    state.toolbarData.name = data.name != null ? data.name : ''
    // 或者直接替换整个对象也可行：
    // state.toolbarData = { name: data.name != null ? data.name : '' }
  }
}

为什么原来的写法无效？ #

Vue的响应式系统基于Object.defineProperty实现，对于数组，它只重写了push/pop/splice等方法来监听变化，直接通过索引修改元素的操作不在监听范围内，所以页面不会触发重新渲染。而对象属性修改、数组splice操作，都能被Vue的响应式系统捕捉到，从而实时更新页面。

你之前切换生命周期钩子到created/beforeCreate没用，是因为问题根本不在钩子的执行时机，而是状态更新的方式不符合Vue的响应式规则。

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