Vue.js中$state的最佳使用方式是什么？AngularJS迁移适配示例咨询

与AngularJS $state.go对等的实现 #

你之前的代码属于路由跳转携带参数的场景，Vue生态对应使用官方路由工具Vue Router实现，写法如下：

第一步：路由配置 #

首先在路由配置文件中声明homework路由：

// router/index.js 路由配置示例
const routes = [
  // 其他路由配置
  {
    path: '/homework',
    name: 'homework', // 路由名称，跳转时作为唯一标识
    component: () => import('@/views/Homework.vue')
  }
]

第二步：跳转传参 #

分两种常用语法：

• 选项式API（Vue2/Vue3都支持）写法，和你原代码逻辑完全对齐：

// 触发跳转的组件内逻辑
this.$router.push({
  name: 'homework',
  params: { homework: homework.homework }
})

• Vue3组合式API <script setup> 写法：

import { useRouter } from 'vue-router'
const router = useRouter()

router.push({
  name: 'homework',
  params: { homework: homework.homework }
})

第三步：目标页接收参数 #

• 选项式API接收：

// Homework.vue 组件内
const homeworkData = this.$route.params.homework

• 组合式API接收：

import { useRoute } from 'vue-router'
const route = useRoute()

const homeworkData = route.params.homework

注意：如果需要刷新页面后参数不丢失，可以把params替换为query，参数会自动拼接在URL上，接收方式对应调整为$route.query.homework即可。

初学者适用的Vue状态管理方案 #

如果你需要跨多组件共享状态（不止是两个路由页传参），优先选择官方推荐的Pinia作为状态管理工具，学习成本低，符合Vue的设计逻辑，基础用法如下：

1. 定义状态仓库 #

// stores/homework.js
import { defineStore } from 'pinia'

export const useHomeworkStore = defineStore('homework', {
  state: () => ({
    currentHomework: null
  }),
  actions: {
    setCurrentHomework(data) {
      this.currentHomework = data
    }
  }
})

2. 存状态+跳转 #

// 触发跳转的组件内
import { useHomeworkStore } from '@/stores/homework'
import { useRouter } from 'vue-router'

const homeworkStore = useHomeworkStore()
const router = useRouter()

// 先存状态
homeworkStore.setCurrentHomework(homework.homework)
// 跳转无需携带参数
router.push({ name: 'homework' })

3. 目标页取状态 #

// Homework.vue 组件内
import { useHomeworkStore } from '@/stores/homework'

const homeworkStore = useHomeworkStore()
const currentHomework = homeworkStore.currentHomework

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