Vue跨文件获取表单输入值失败，请求技术支持

核心问题分析 #

你遇到的undefined错误和ID格式无关，也不需要给ID加$前缀。问题出在跨文件获取表单值的方式错误：

1. 非组件文件（如otherfile.js）没有DOM上下文，无法直接访问home.vue里的DOM元素，通过ID获取自然返回undefined。
2. 你直接调用localStorage.getItem("forminput")，但从未把输入框的值存入localStorage，所以拿不到数据。

正确实现方案（基于Vuex场景，你的代码里有commit，推测是Vuex Action） #

步骤1：在home.vue中绑定响应式数据并传递参数

<template>
  <!-- 用v-model绑定输入框到组件的响应式数据 -->
  <input type="text" v-model="inputAmount" id="forminput" />
  <!-- 点击按钮时调用方法，把输入值传给Action -->
  <button @click="triggerAsyncAction">执行操作</button>
</template>

<script>
// 引入Vuex的mapActions辅助函数
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      inputAmount: '' // 绑定输入框的响应式变量
    }
  },
  methods: {
    // 映射Vuex的Action到组件方法
    ...mapActions(['contributionAction']),
    triggerAsyncAction() {
      // 调用Action时，把账号名和输入值一起传进去
      this.contributionAction({
        accountName: localStorage.getItem("accountName"),
        inputAmount: this.inputAmount
      });
    }
  }
}
</script>

步骤2：修改otherfile.js中的Action接收参数

// 接收传入的参数，解构出accountName和inputAmount
async function contributionAction({ commit, state }, { accountName, inputAmount }) {
  if (state.debug) {
    console.log("Contribution");
  }
  try {
    const publickey = state.accountData[0]["data"]["guard"]["keys"][0];
    // 直接使用传入的inputAmount即可
    console.log("输入框的值：", inputAmount);
    // 后续业务逻辑...
  } catch (error) {
    // 错误处理逻辑
    console.error(error);
  }
}

其他补充说明 #

• 不要用$前缀给DOM ID命名：$是Vue实例内置属性的专属前缀（如$refs、$store），普通DOM ID不需要加。
• 如果不用Vuex，也可以通过事件总线或全局状态管理工具传递数据，但Vuex是Vue项目中跨组件/文件传值的标准方案。
• 若要临时存值到localStorage，需要在输入框值变化时主动存入：比如在home.vue的watch中监听inputAmount，变化时执行localStorage.setItem("forminput", this.inputAmount)，再在otherfile.js中获取。

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