Vue3.2+TypeScript跨视图组件传递对象数组的方法

一、使用 Pinia（Vue 3 官方推荐方案） #

Pinia 是 Vue 官方主推的状态管理库，比 Vuex 更轻量化，TypeScript 支持更原生友好，适合跨视图/组件共享数据。

1. 安装 Pinia #

npm install pinia
# 或 yarn add pinia

2. 全局挂载 Pinia #

在 src/main.ts 中配置：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

3. 创建状态仓库 #

在 src/stores/rideStore.ts 中定义包含 rideData 的仓库，同时做好类型约束：

import { defineStore } from 'pinia'

// 定义单个 ride 数据的类型
interface RideItem {
  fromLoc: string
  toLoc: string
  seatNumber: string
  waitLoc: string
  passengers: string[]
}

export const useRideStore = defineStore('ride', {
  state: () => ({
    rideData: [] as RideItem[]
  }),
  actions: {
    // 批量更新 rideData
    setRideData(data: RideItem[]) {
      this.rideData = data
    },
    // 新增单条 ride 数据
    addRideItem(item: RideItem) {
      this.rideData.push(item)
    }
  },
  // 可选：定义计算属性
  getters: {
    rideCount: (state) => state.rideData.length
  }
})

4. 组件中使用仓库 #

（1）在拥有 rideData 的组件中同步数据到仓库

import { useRideStore } from '@/stores/rideStore'
import { onMounted } from 'vue'

export default {
  setup() {
    const rideStore = useRideStore()
    
    // 假设这是你本地的 rideData 数据源
    const localRideData = [
      {
        fromLoc: '上海虹桥',
        toLoc: '杭州东站',
        seatNumber: '12A',
        waitLoc: 'B12 检票口',
        passengers: ['张三', '李四']
      }
    ]

    onMounted(() => {
      // 将本地数据同步到 Pinia 仓库
      rideStore.setRideData(localRideData)
    })

    return {}
  }
}

（2）在目标组件中读取共享数据

import { useRideStore } from '@/stores/rideStore'
import { computed } from 'vue'

export default {
  setup() {
    const rideStore = useRideStore()
    // 用 computed 保持数据响应式
    const rideData = computed(() => rideStore.rideData)

    return {
      rideData
    }
  }
}

二、使用 Vuex 4（兼容方案） #

如果需要使用 Vuex，以下是 Vuex 4 在 Vue 3 + TS 中的实现步骤：

1. 安装 Vuex 4 #

npm install vuex@next
# 或 yarn add vuex@next

2. 创建 Vuex 仓库 #

在 src/store/index.ts 中配置：

import { createStore } from 'vuex'

interface RideItem {
  fromLoc: string
  toLoc: string
  seatNumber: string
  waitLoc: string
  passengers: string[]
}

interface RootState {
  rideData: RideItem[]
}

export default createStore<RootState>({
  state: {
    rideData: []
  },
  mutations: {
    SET_RIDE_DATA(state, data: RideItem[]) {
      state.rideData = data
    },
    ADD_RIDE_ITEM(state, item: RideItem) {
      state.rideData.push(item)
    }
  },
  actions: {
    setRideData({ commit }, data: RideItem[]) {
      commit('SET_RIDE_DATA', data)
    },
    addRideItem({ commit }, item: RideItem) {
      commit('ADD_RIDE_ITEM', item)
    }
  },
  getters: {
    rideData: (state) => state.rideData,
    rideCount: (state) => state.rideData.length
  }
})

3. 全局挂载 Vuex #

在 src/main.ts 中配置：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

4. 组件中使用 Vuex #

（1）在数据源组件中更新状态

import { useStore } from 'vuex'
import { onMounted } from 'vue'

export default {
  setup() {
    const store = useStore()
    
    const localRideData = [
      {
        fromLoc: '上海虹桥',
        toLoc: '杭州东站',
        seatNumber: '12A',
        waitLoc: 'B12 检票口',
        passengers: ['张三', '李四']
      }
    ]

    onMounted(() => {
      store.dispatch('setRideData', localRideData)
    })

    return {}
  }
}

（2）在目标组件中读取状态

import { useStore } from 'vuex'
import { computed } from 'vue'

export default {
  setup() {
    const store = useStore()
    const rideData = computed(() => store.getters.rideData)

    return {
      rideData
    }
  }
}

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