数据字典，不同页面传递参数。 dict.vue, 页面的id传递到 dictValue.vue 获取list.
//dict.vue 传参
showDictValue (item) {
this.$store.dispatch('getSystemDictId', item.id)
this.$router.push({
name: 'dictValue'
})
},
//dictValue.vue 接收参数.
import { mapGetters } from 'vuex'
systemDictId: null, //数据类型 null, 0 ,都试过
computed: {
...mapGetters({
systemDictId: 'getSystemDictId'
})
},
// dictValue 中的get List方法
getDictValueListById () {
this.axios.get(this.$http.httpUrl('/api/dictValue/selectByDictId'), {
params: {
pageNumber: this.currentPage,
pageSize: this.pageSize,
systemDictId: this.systemDictId,
}
}).then(response => {
//this.loading = true
this.dataList = response.data.data.dataList
this.totalCount = response.data.data.total
})
}
java后端：
@GetMapping("selectByDictId")
public Result<PageInfo<SystemDictValue>> selectByDictId(PageParam pageParam, SystemDictValue systemDictValue) {
LambdaQueryWrapper<SystemDictValue> queryWrapper = Wrappers.<SystemDictValue>lambdaQuery()
.eq(SystemDictValue::getSystemDictId, systemDictValue.getSystemDictId());
return Result.success(systemDictValueService.selectPage(pageParam, queryWrapper));
}
调试结果
Field error in object 'systemDictValue' on field 'systemDictId': rejected value [NaN]; codes [typeMismatch.systemDictValue.systemDictId,typeMismatch.systemDictId,typeMismatch.java.lang.Integer,typeMismatch]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [systemDictValue.systemDictId,systemDictId]; arguments []; default message [systemDictId]]; default message [Failed to convert property value of type 'java.lang.String' to required type 'java.lang.Integer' for property 'systemDictId'; nested exception is java.lang.NumberFormatException: For input string: "NaN"]
前端结果：
状态码200，负载显示传递参数NaN
学习阶段，不是特别懂别喷，最好能远程帮忙看看。
收起
数据类型转换有问题：systemDictId 应该是一个整数类型，但是在传递过程中，它被转换成了字符串类型，并且其值是 NaN。
前端代码看到item.id 是一个数值类型，但是从后端看SystemDictValue 实体类中的 systemDictId 属性类型不确定，可能是字符串类型或者其他类型，在转换成整数类型时会出现错误。
可以在前端代码中对传递的参数进行类型转换，用 parseInt() 函数将字符串类型的参数转换成整数类型。
比如：
this.$store.dispatch('getSystemDictId', parseInt(item.id))
然后，后端代码中的 SystemDictValue 实体类中的 systemDictId 属性应该声明为整数类型，例如 Integer 或 int，在类型转换时不出错。
如果答案对您有所帮助，望采纳。
以下内容引用CHATGPT：
问题出在前端传递的参数类型不匹配，导致后端无法正确解析参数。前端传递的参数为字符串类型，而后端需要的是整型。需要将前端传递的参数进行类型转换。
在 dictValue.vue 中的 computed 中，将 systemDictId 的类型改为 Number：
computed: {
...mapGetters({
systemDictId: 'getSystemDictId'
})
},
data() {
return {
systemDictId: null // 初始化为 null
}
},
mounted() {
this.systemDictId = Number(this.systemDictId); // 进行类型转换
this.getDictValueListById();
}
在 dict.vue 中，将参数进行类型转换：
showDictValue (item) {
this.$store.dispatch('getSystemDictId', Number(item.id)); // 进行类型转换
this.$router.push({
name: 'dictValue'
});
}
这样就可以解决参数类型不匹配的问题了。
建议使用query进行传递参数，这是前端的通用做法，
this.$router.push({
pathname: '/url',
query: {
id,
}
})
引用chatGPT作答，根据错误信息，Java后端在处理参数时抛出了NumberFormatException异常，提示输入的字符串NaN无法转换为整数类型。这表明前端传递的参数类型不匹配，因此需要检查传递参数的代码和数据类型。
在前端代码中，你使用this.$router.push方法将item.id传递给路由器，但是没有将其作为参数传递。因此，在接收参数的dictValue.vue文件中，你使用了mapGetters将systemDictId作为计算属性获取。然而，这只是获取Vuex中的状态，而不是路由器参数。
为了解决这个问题，你需要在$router.push中传递参数，以便在dictValue.vue中使用。可以这样修改dict.vue中的代码：
showDictValue (item) {
this.$store.dispatch('getSystemDictId', item.id)
this.$router.push({
name: 'dictValue',
params: { systemDictId: item.id }
})
}
这样，dictValue.vue中的systemDictId将会被正确地设置为路由器参数中的systemDictId值，而不是从Vuex中获取的值。这应该解决了数据类型不匹配的问题。
不知道你这个问题是否已经解决, 如果还没有解决的话:回答:
首先，使用数据字典和mapGetters来实现传递参数需要知道，它们都是VueX中的概念。Vuex是一个专为Vue.js应用程序开发的状态管理模式。在Vue.js应用程序中，组件的状态分散在各个组件之间。Vuex可以将所有组件的状态存储在一个单一的位置中，并按照一定的规则进行状态的修改和交互。下面是解决你的问题的步骤：
// store.js
const store = new Vuex.Store({
state: {
pageId: '' // 初始化为空
},
mutations: {
setPageId(state, id) {
state.pageId = id
}
},
actions: {
setPageId({commit}, id) {
commit('setPageId', id)
}
},
getters: {
getPageId(state) {
return state.pageId
}
}
})
// dict.vue
<template>
<div>
<h1>Dict page</h1>
<button @click="goToDictValue">Go to dict value page</button>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
name: 'dict',
methods: {
...mapActions(['setPageId']),
goToDictValue() {
this.setPageId(123) // 自己定义一个页面id
this.$router.push('/dictValue')
}
}
}
</script>
// dictValue.vue
<template>
<div>
<h1>Dict value page</h1>
<p>Page ID: {{ pageId }}</p>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'dictValue',
computed: {
...mapGetters(['getPageId']),
pageId() {
return this.getPageId
}
},
mounted() {
// 将页面id传递给后端
submitData(this.pageId)
}
}
</script>
// dictValue.vue
mounted() {
const id = parseInt(this.pageId)
submitData(id)
}
至此，问题已经得到解决。需要注意的是，所以代码均为伪代码，具体情况需要根据实际情况进行调整。