Vue/Vuex中computed内使用mapState绑定的状态更新后视图未同步刷新问题

1. 修正mapState语法错误 #

你提供的组件代码中mapState调用缺少闭合右括号，语法错误会导致计算属性初始化失败，无法监听state变化，修正后的写法如下：

<template>
  <div> {{ name }} </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('user', ['age','name'])
  }
}
</script>

2. 排查Vue2响应式规则适配问题 #

如果你使用的是Vue2版本，Vuex遵循Vue的响应式限制，必须在模块state初始化时提前声明name字段：

// user 模块state初始化示例
const state = () => ({
  name: '', // 必须提前声明，不可后续动态追加
  age: 0
})

如果确实需要动态添加字段，修改mutation使用Vue.set赋值：

import Vue from 'vue'
// mutation 代码
[SET_USER_NAME_MUTATION](state, value) {
  Vue.set(state, 'name', value)
}

3. 检查模块命名空间配置 #

mapState第一个参数传模块名的前提是该模块注册时开启了namespaced: true，如果未开启命名空间，需要调整mapState写法：

computed: {
  // 未开启命名空间时不需要传模块名
  ...mapState(['age','name'])
}

4. 校验state修改路径是否合规 #

所有Vuex state的修改必须通过mutation提交，禁止直接修改$store.state.user.name，否则会导致状态和视图不同步。

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