如何使用Vuex getters获取state中对象的指定属性值

实现方案 #

方案1：直接调用现有getter后取属性 #

你当前的getTodoById已经返回了对应id的卡片对象，直接在调用后链式获取htmlCode属性即可，模板写法如下：

<p>{{ this.$store.getters.getTodoById(2).htmlCode }}</p>

如果担心传入的id不存在导致返回undefined报错，可以加可选链做兼容：

<p>{{ this.$store.getters.getTodoById(2)?.htmlCode }}</p>

方案2：新增专属getter直接返回htmlCode #

如果需要更封装的调用方式，可以在Vuex的getters配置中新增专门获取htmlCode的getter：

getters: {
  getTodoById: (state) => (id) => {
    return state.cards.find(todo => todo.index === id)
  },
  // 新增专门获取对应id htmlCode的getter
  getTodoHtmlCodeById: (state) => (id) => {
    const targetCard = state.cards.find(todo => todo.index === id)
    // 匹配不到时返回空字符串避免渲染报错
    return targetCard ? targetCard.htmlCode : ''
  }
},

修改完成后在模板中直接调用新getter即可：

<p>{{ this.$store.getters.getTodoHtmlCodeById(2) }}</p>

两种方案均完全通过Vuex getters实现，可根据你的实际代码习惯选择。

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