Vuex嵌套状态：VueJS中如何渲染指定的嵌套应用状态？

嘿，我来帮你搞定Vuex嵌套状态的渲染问题！咱先拿个实际的嵌套状态例子来说事儿，假设你的Vuex store是这样的结构：

// store/index.js
const store = new Vuex.Store({
  state: {
    user: {
      profile: {
        firstName: 'John',
        lastName: 'Doe',
        age: 30
      },
      address: {
        street: '123 Main St',
        city: 'New York',
        zipCode: '10001'
      }
    },
    products: {
      electronics: [
        { id: 1, name: 'Laptop', price: 999 },
        { id: 2, name: 'Phone', price: 699 }
      ],
      clothing: [
        { id: 3, name: 'T-Shirt', price: 29 },
        { id: 4, name: 'Jeans', price: 59 }
      ]
    }
  }
})

下面给你几种常用的渲染方式，按需选择就行：

1. 直接通过$store逐层访问（简单直接） #

如果只是偶尔用到某个嵌套属性，直接在模板里通过$store.state逐层访问最省事：

<template>
  <div class="user-info">
    <p>姓名: {{ $store.state.user.profile.firstName }} {{ $store.state.user.profile.lastName }}</p>
    <p>城市: {{ $store.state.user.address.city }}</p>
    <h3>电子产品列表</h3>
    <ul>
      <li v-for="item in $store.state.products.electronics" :key="item.id">
        {{ item.name }} - ${{ item.price }}
      </li>
    </ul>
  </div>
</template>

2. 使用mapState辅助函数简化路径 #

如果组件里要用到多个嵌套状态，每次写长路径太啰嗦，用mapState把它们映射到组件的计算属性里，模板里就能直接用别名：

<template>
  <div class="user-info">
    <p>姓名: {{ fullName }}</p>
    <p>年龄: {{ userAge }}</p>
    <p>街道: {{ userStreet }}</p>
    <h3>服装列表</h3>
    <ul>
      <li v-for="item in clothingProducts" :key="item.id">
        {{ item.name }} - ${{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      // 用箭头函数返回嵌套属性
      fullName: state => `${state.user.profile.firstName} ${state.user.profile.lastName}`,
      userAge: state => state.user.profile.age,
      userStreet: state => state.user.address.street,
      clothingProducts: state => state.products.clothing
    })
  }
}
</script>

3. 用Getters封装复杂嵌套（推荐多组件复用场景） #

如果多个组件都需要访问同一个嵌套状态，或者需要对嵌套数据做一些处理（比如拼接、过滤），最好在Vuex里定义Getters，这样逻辑统一，维护起来更方便：

首先在store里添加Getters：

// store/index.js
const store = new Vuex.Store({
  // ...state部分省略
  getters: {
    getUserFullName: state => `${state.user.profile.firstName} ${state.user.profile.lastName}`,
    getUserFullAddress: state => `${state.user.address.street}, ${state.user.address.city} ${state.user.address.zipCode}`,
    getElectronicsProducts: state => state.products.electronics,
    // 还可以加过滤逻辑，比如价格低于100的电子产品
    getAffordableElectronics: state => state.products.electronics.filter(item => item.price < 500)
  }
})

然后在组件里用mapGetters或者直接访问$store.getters：

<template>
  <div class="user-info">
    <p>全名: {{ getUserFullName }}</p>
    <p>完整地址: {{ getUserFullAddress }}</p>
    <h3>平价电子产品</h3>
    <ul>
      <li v-for="item in getAffordableElectronics" :key="item.id">
        {{ item.name }} - ${{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'getUserFullName',
      'getUserFullAddress',
      'getAffordableElectronics'
    ])
  }
}
</script>

注意事项 #

• 不管用哪种方式，修改嵌套状态的时候必须通过Vuex的Mutations，不能直接修改state.user.profile.name，否则会破坏Vuex的状态管理规则，而且可能导致视图不响应更新。
• 如果嵌套对象是后来动态添加的属性，要确保它是响应式的，可以用Vue的Vue.set或者在Mutation里用展开运算符更新对象。

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