uniapp中的form表单跨页面传值

在uni-app中，可以通过使用vuex来实现跨页面传值。vuex是一个专为Vue.js应用程序开发的状态管理模式。它可以集中管理应用程序中的所有组件的状态，并提供了一种可预测的方式来修改和获取状态。

以下是在uni-app中使用vuex实现跨页面传值的步骤：

1. 安装vuex：在uni-app项目的根目录下，打开终端并执行以下命令安装vuex：

npm install vuex --save

2. 创建vuex store：在uni-app项目的根目录下，创建一个名为store的文件夹，在该文件夹下创建一个名为index.js的文件。在index.js中编写以下代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    formData: {} // 存储表单数据的对象
  },
  mutations: {
    setFormData(state, data) {
      state.formData = data
    }
  },
  actions: {
    updateFormData({ commit }, data) {
      commit('setFormData', data)
    }
  },
  getters: {
    getFormData(state) {
      return state.formData
    }
  }
})

export default store

3. 在main.js中引入vuex：在main.js中添加以下代码：

import store from './store'

Vue.prototype.$store = store

4. 在发送表单数据的页面中，调用vuex的action来更新表单数据：

<template>
  <view>
    <!-- 表单内容 -->
    <input v-model="formData.name" />
    <input v-model="formData.email" />
    
    <!-- 提交按钮 -->
    <button @click="submitForm">提交</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: ''
      }
    }
  },
  methods: {
    submitForm() {
      this.$store.dispatch('updateFormData', this.formData)
      uni.navigateTo({
        url: '/pages/other-page' // 跳转到其他页面
      })
    }
  }
}
</script>

5. 在接收表单数据的页面中，通过vuex的getter来获取表单数据：

<template>
  <view>
    <!-- 显示表单数据 -->
    <text>{{ formData.name }}</text>
    <text>{{ formData.email }}</text>
  </view>
</template>

<script>
export default {
  computed: {
    formData() {
      return this.$store.getters.getFormData
    }
  }
}
</script>

通过以上步骤，就可以在uni-app中实现跨页面传值了。在发送表单数据的页面中，调用vuex的action来更新表单数据；在接收表单数据的页面中，通过vuex的getter来获取表单数据。