如何将vuejs数组发送到另一个组件，而不会在路由到该组件时丢失数组数据？

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    myArray: []
  },
  mutations: {
    setArray(state, newArray) {
      state.myArray = newArray
    }
  }
})

export default store

// SenderComponent.vue
<template>
  <div>
    <!-- 假设有一个按钮，点击时发送数组 -->
    <button @click="sendArray">发送数组</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendArray() {
      // 假设有一个数组需要发送
      const myArray = [1, 2, 3]

      // 将数组存储在数据存储对象中
      this.$store.commit('setArray', myArray)
    }
  }
}
</script>

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import TargetComponent from '@/components/TargetComponent.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/target',
      name: 'TargetComponent',
      component: TargetComponent,
      beforeEnter: (to, from, next) => {
        // 将数据存储对象中的数组传递给目标组件
        const myArray = this.$store.state.myArray
        to.params.myArray = myArray

        next()
      }
    }
  ]
})

export default router

// TargetComponent.vue
<template>
  <div>
    <!-- 在目标组件中使用传递的数组 -->
    <div v-for="item in myArray" :key="item">{{ item }}</div>
  </div>
</template>

<script>
export default {
  computed: {
    myArray() {
      // 接收传递的数组
      return this.$route.params.myArray
    }
  }
}
</script>