如何通过更简洁的路径获取Vuex中的数据？

嘿，太懂那种反复写超长嵌套路径的痛苦了！针对你说的仅需单次访问深层state的场景，这里有几个实用的小技巧，比硬写全路径或者每次都建单独计算属性更顺手：

1. 方法内临时解构赋值 #

如果只是在某个方法里单次（或多次）用到这个值，完全可以在方法内部先解构出目标节点，代码会清爽很多：

methods: {
  someMethod() {
    // 先把深层节点解构出来
    const { info } = this.$store.state.foo.bar.tar;
    // 接下来直接用info就行，不用再写一长串路径
    console.log(info);
    // 如果还需要tar下的其他属性，也可以一起解构：const { info, otherProp } = ...
  }
}

这种方式最轻量化，不用额外定义计算属性或全局配置，适合临时、局部的访问需求。

2. 定义Vuex Getter（推荐长期维护场景） #

如果这个info在项目多个地方都可能用到，或者担心后续state结构变化导致要改多处代码，强烈建议在Vuex里定义一个Getter：

// /store/getters.js
export default {
  getInfo: state => state.foo.bar.tar.info
}

之后在组件里不管是单次还是多次调用，直接用：

// 方法里
methods: {
  getInfo() {
    return this.$store.getters.getInfo;
  }
}

// 模板里直接用
{{ $store.getters.getInfo }}

好处是统一维护路径，哪天foo.bar.tar的结构变了，只需要修改Getter里的路径，所有用到的地方自动生效，不用逐个组件去改。

3. 组件内定义快捷父节点计算属性 #

如果你的组件需要访问tar下的多个属性（不止info），可以给父节点做一个计算属性，比单独给每个属性写计算属性高效：

computed: {
  tarState() {
    return this.$store.state.foo.bar.tar;
  }
}

然后在模板或方法里直接用：

<!-- 模板里 -->
{{ tarState.info }}

<!-- 方法里 -->
methods: {
  someMethod() {
    console.log(this.tarState.info);
  }
}

这种方式兼顾了灵活性和简洁性，适合组件内需要频繁访问同一深层父节点下多个属性的场景。

4. 用mapState做简洁映射 #

如果组件需要映射多个state属性，mapState的箭头函数写法也能帮你简化代码：

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState({
      info: state => state.foo.bar.tar.info
    })
  }
}

之后就可以直接在模板或方法里用this.info，和普通计算属性一样，但写法更紧凑，适合组件内需要映射多个state的情况。

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