Vue Metamask 登录应用程序无法与 Metamask 交互，因为商店组件不会与前端交互

Question

我按照本教程尝试使用 Vue 创建一个 Metamask 登录应用 https://duartefdias.medium.com/authenticating-users-to-your-web-app-using-metamask-and-nodejs-e920e45e358. The code is described in individual files but there isn't a defined project structure. I made my own github repo to try to organize the structure in terms of where each file should go in the project https://github.com/ChristianOConnor/metamask-vue-for-debug。该应用程序可以编译，但 connect/install Metamask 的按钮不会执行任何操作。

这是显示连接到 Metamask 功能的实际代码：

<template>
  <div>
    <button
      color="primary"
      large
      :disabled="buttonDisabled"
      v-on:click="performAction"
    >
      <img src="../assets/metamaskloginbutton.png" class="metamask-logo" />
      <span v-if="isMetaMaskInstalled()">Login with Metamask</span>
      <span v-if="!isMetaMaskInstalled()">{{ buttonInstallText }}</span>
    </button>
  </div>
</template>

这是用来确定是否安装了 Metamask 的函数：

isMetaMaskInstalled() {
      //Have to check the ethereum binding on the window object to see if it's installed
      if (process.client) {
        return Boolean(
          this.$store.getters["metamask/ethereum"] &&
            this.$store.getters["metamask/ethereum"].isMetaMask
        );
      }
      return false;
    },

即使在我访问该站点的浏览器中安装了 Metamask，此功能始终 return 错误。

我和代码的作者谈过，他说我的问题是我没有考虑 vue 商店，我需要添加代码 ethereum: state => { if(process.client) { return window.ethereum } } 但他从未指定在哪里。我在 vue 商店上阅读了类似这样的文章 https://www.digitalocean.com/community/tutorials/how-to-manage-state-in-a-vue-js-application-with-vuex。这篇文章虽然没有帮助。我试图通过像这样

更改 store/index.js 文件来让商店正常工作

store/index.js

import { createStore } from "vuex";

export default createStore({
  state: {},
  getters: {
    ethereum: () => {
      if (process.client) {
        return window.ethereum;
      }
    },
  },
  mutations: {},
  actions: {},
  modules: {},
});

顺便说一句，我不得不从 ethereum: state => { if(process.client) { return window.ethereum } } 中删除 state，因为 prettier 不允许使用未使用的参数编译代码。

为什么即使我将 ethereum: state => { if(process.client) { return window.ethereum } } 添加到 store/index.js 文件，isMetaMaskInstalled() 总是 return 错误？

我假设此代码失败是因为我将 ethereum: state => { if(process.client) { return window.ethereum } } 放在了错误的位置。我应该把这段代码放在哪里？

Answer 1

这里的问题是 process.client 总是返回 false

ethereum: () => {
  if (process.client) {
    return window.ethereum;
}

我改成了：

ethereum: () => {
  return window.ethereum;
}

我的元掩码 window 弹出以供登录

Vue Metamask 登录应用程序无法与 Metamask 交互，因为商店组件不会与前端交互

Vue Metamask Login App Can't Interact with Metamask Because The Store Components Won't Interact with The Frontend

javascript

vue.js

ethereum

web3

metamask