Vuex4拆分模块到独立文件后v-for遍历history数组不渲染问题

拆分Vuex模块后，模块内的state默认会挂载到根state对应的模块名属性下，你在main.js中注册的模块名为counter，所以history属性的实际访问路径是$store.state.counter.history，你直接用...mapState(['history'])从根state取值，无法拿到对应数据，导致v-for没有内容渲染。

有两种可选方案，多模块项目推荐第二种规范写法：

方案1：直接修改mapState取值路径（无需调整模块配置） #

修改History.vue中的computed配置，指定从counter模块取history：

computed: {
  // 替换原有...mapState(['history'])
  ...mapState({
    history: state => state.counter.history
  }),
  ...mapGetters(['activeIndexes']),
}

注意：该方案适用未开启模块命名空间的场景，模块内的getters、mutations、actions默认注册在全局命名空间，因此原有mapGetters配置无需修改。

方案2：开启模块命名空间（避免全局命名冲突） #

第一步：修改modules/counter.js的导出配置，开启命名空间：

export default {
  namespaced: true, // 新增该行开启命名空间
  state,
  mutations,
  actions,
  getters
}

第二步：修改History.vue中的mapState和mapGetters配置，指定模块名前缀：

computed: {
  ...mapState('counter', ['history']),
  ...mapGetters('counter', ['activeIndexes']),
}

注意：开启命名空间后，后续调用模块的mutations、actions时也需要加上模块前缀，例如this.$store.commit('counter/addToCounter', 10)，使用mapMutations、mapActions时同样指定第一个参数为模块名即可。

修改完成后重新运行项目，触发数值增减操作后history区域就会正常渲染历史数值。

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