使用vue-property-decorator与vuex-module-decorators时孙组件无法访问state如何解决

• Vuex模块注册配置错误：使用vuex-module-decorators定义动态模块时未正确配置name、dynamic参数，或未开启stateFactory导致多实例场景下state未正确初始化，也可能是命名空间配置与访问时的路径不匹配。
• 组件内装饰器使用错误：访问state时@State装饰器未指定正确的模块路径，或使用getModule时未绑定根store实例，也存在属性名拼写大小写不一致的可能。
• 时序与初始化问题：目标state属性依赖异步接口赋值，未设置初始默认值，孙组件TodoSummary渲染时异步请求尚未返回，导致读取到undefined。

1. 修正Vuex模块配置 #

确保模块定义时@Module装饰器参数配置正确，所有state属性提前设置初始值：

import { Module, VuexModule } from 'vuex-module-decorators'
import store from '@/store'

@Module({
  name: 'todo', // 模块名要和后续访问路径一致
  dynamic: true, // 动态注册必填
  store, // 绑定根store实例
  namespaced: true,
  stateFactory: true // 组件复用场景下必填，避免state共享污染
})
export default class TodoModule extends VuexModule {
  // 必须设置非undefined的初始值
  summaryTotal = 0
  todoList = []
}

2. 修正组件内state访问写法 #

两种常用的访问方式均可，按需选择：

方式1：通过vuex-class的@State装饰器访问

import { Component, Vue } from 'vue-property-decorator'
import { State } from 'vuex-class'

@Component
export default class TodoSummary extends Vue {
  // 按「模块名.属性名」指定state路径
  @State(state => state.todo.summaryTotal) summaryTotal!: number

  mounted() {
    console.log(this.summaryTotal) // 可正常读取
  }
}

方式2：通过getModule生成的模块实例访问

import { Component, Vue } from 'vue-property-decorator'
import { getModule } from 'vuex-module-decorators'
import TodoModule from '@/store/modules/todo'

// 生成绑定根store的模块实例
const todoStore = getModule(TodoModule)

@Component
export default class TodoSummary extends Vue {
  get summaryTotal() {
    return todoStore.summaryTotal
  }

  mounted() {
    console.log(this.summaryTotal) // 可正常读取
  }
}

3. 处理异步赋值时序问题 #

如果state属性是异步更新的，渲染时增加兜底逻辑：

• 访问属性时用可选链?.避免报错
• 父组件TodoInput中增加判断，异步数据返回后再渲染TodoSummary：

<template>
  <div class="todo-input">
    <!-- 异步数据就绪后再渲染子组件 -->
    <TodoSummary v-if="summaryTotal !== undefined" />
  </div>
</template>

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