vue.js 我没有对代码进行任何更改，现在出现了“TypeError：无法解构'vnode'的属性'type'，因为它为null,“当我启动Web应用程序时

dvtswwa3 于 2022-11-30 发布在 Vue.js

关注(0)|答案(5)|浏览(1928)

我有一个连接到API的Web应用程序。通常我启动API，它就可以工作了。现在，毫无理由（我没有修改代码和API），它就不能工作了，而且我可以在Web应用程序上共享大量的错误。我该怎么办？

at callWithErrorHandling (vue.runtime.esm-bundler.js?ebac:123)
at setupStatefulComponent (vue.runtime.esm-bundler.js?ebac:1242)
at setupComponent (vue.runtime.esm-bundler.js?ebac:1238)
at mountComponent (vue.runtime.esm-bundler.js?ebac:838)
at processComponent (vue.runtime.esm-bundler.js?ebac:834)
at patch (vue.runtime.esm-bundler.js?ebac:755)
at ReactiveEffect.componentUpdateFn [as fn] (vue.runtime.esm-bundler.js?ebac:856)
at ReactiveEffect.run (vue.runtime.esm-bundler.js?ebac:67)
at setupRenderEffect (vue.runtime.esm-bundler.js?ebac:881)

`
我尝试重新启动Web应用程序，但同样的问题。

vue.js

来源：https://stackoverflow.com/questions/74570573/i-changed-nothing-to-my-code-and-now-i-have-typeerror-cannot-destructure-prop

5条答案

按热度按时间

au9on6nz1#

我也有一个很长的答案，所以我会尽量缩短它，但它可以来自src/stores/yourstore.js中的商店
首先，您必须导入所需的内容，并将其视为一个状态

import { defineStore } from "pinia";

export const useGlobalStateStore = defineStore("global", {
  state: () => ({
    globalSell: 0,
    whateverarray: [...],
   }),

然后，你有了getter和actions（不是getter和setter，小心点）

getters: {
    doubleCount(state) {
      return state.globalSell * 2;
    },
  },

actions: {
    incrementGlobalSell() {
      this.globalSell++;
    },
    deleteCategory(id) {
      this.categories = this.categories.filter((element) => {
        return element.id != id;
      });
    },

如果你想在你的文件上导入它，它将首先是一个导入pn indexPage.js例如或任何你想要的

<script>
 -> import {useGlobalStateStore} from "stores/globalState";
    import NavComponent from "components/NavComponent";

在你得到的数据中存储

data() {
    return {
      -> store : useGlobalStateStore(),
         email: "",

要使用它，它将是这样的。存储。

赞(0）回复(0）举报 2022-11-30

5vf7fwbs2#

现在，对于潜在的API问题，请确保进行良好的配置。这是针对app/config/中的db.config.js

module.exports = {
    HOST:"sql12.freemysqlhosting.net",
    USER:"user",
    PASSWORD:"pass",
    DB:"nameOfDB"
}

你可能需要的其他配置是令牌配置，但它有点复杂，所以没有问题，告诉我，如果你需要它以后。
customer.controller.js中我的文件示例

const Customer = require("../models/customer.model.js");

const getAllCustomer = (req, res) => {
    Customer.getAllRecords((err, data) => {
      if (err) {
        res.status(500).send({
            message: err.message || "Some error occured while 
retriveing data.",
        });
    } else res.send(data);
  });
};

const createNewCustomer = (req, res) => {
  if (!req.body) {
    res.status(400).send({
        message: "Content can not be empty.",
    });
}

const customerObj = new Customer({
    name: req.body.name,
    mail: req.body.mail,
    password: req.body.password,
    address: req.body.address,
    postCode: req.body.postCode,
    city: req.body.city
});

Customer.create(customerObj, (err, data) => {
    console.log(req.body)
    if (err) {
        res.status(500).send({
            message: err.message || "Some error occured while 
creating.",
        });
    } else {
        res.send(data);
    }
  });
};

const updateCustomer = (req, res) =>{
   if(!req.body){
     res.status(400).send({ message: "Content can not be 
 empty."});
 }
const data = {
    name: req.body.name,
    mail: req.body.mail,
    password: req.body.password,
    address: req.body.address,
    postCode: req.body.postCode,
    city: req.body.city
};
Customer.updateByID(req.params.id, data, (err, result)=>{
    if(err){
        if(err.kind == "not_found"){
            res.status(401).send({
                message: "Not found Customer id: " + 
req.params.id
            });
        } else{
            res.status(500).send({
                message: "Error update Customer id: " + 
req.params.id
            });
        }
    } else res.send(result);
  });
};

const deleteCustomer = (req, res) =>{
   Customer.delete(req.params.id, (err, result)=>{
    if(err){
        if(err.kind == "not_found"){
            res.status(401).send({
                message: "Not found Customer id: " + 
 req.params.id
            });
        }else{
            res.status(500).send({
                message: "Error delete Customer id: " + 
 req.params.id
            });
        }
    }
    else res.send(result);
  });
};

const loginCustomer = (req, res) => {
    if (!req.body) {
       res.status(400).send({
        message: "Content can not be empty.",
    });
}

const account = new Customer({
    mail: req.body.mail,
    password: req.body.password
});

Customer.login(account, (err, data)=>{
    if(err){
        if(err.kind == "not_found"){
            res.status(401).send({
                message: "Not found " + req.body.mail
               });
            } else if (err.kind == "invalid_pass"){
                res.status(401).send({
                    message: "Invalid Password"
                });
            } else{
                res.status(500).send({
                    message: "Error retriveing " + req.body.mail
                });
            }
        }else res.send(data);
    });
};

module.exports = {
getAllCustomer,
createNewCustomer,
updateCustomer,
deleteCustomer,
loginCustomer
};

赞(0）回复(0）举报 2022-11-30

92dk7w1h3#

您遇到的问题也可能来自src/router/routes.js中的路由

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/IndexPage.vue') },
      { path: 'signin', component: () => import('pages/SigninPage.vue') 
},
      { path: 'signup', component: () => import('pages/SignupPage.vue') 
},
    ]
  },
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/ErrorNotFound.vue')
  }
]

export default routes

这个错误可能来自路线，尝试这个给我更新！
如果我们遵循这一原则，API路线将是

module.exports = (app) => {
    const customer_controller = 
require("../controllers/customer.controller")
    var router = require("express").Router();
    router.post("/add", customer_controller.createNewCustomer);
    router.get("/all", customer_controller.getAllCustomer);
    router.put("/:id", customer_controller.updateCustomer);
    router.delete("/:id", customer_controller.deleteCustomer);
    router.post("/login", customer_controller.loginCustomer);

    app.use("/api/customer", router);
};

赞(0）回复(0）举报 2022-11-30

ua4mk5z44#

src/boot/文件夹中的axios.js文件可能有问题

import { boot } from 'quasar/wrappers'
    import axios from 'axios'

    // example: const RESTURL = "http://172.26.117.16:3000/api"
    const RESTURL = "http://localhost:3000/api"
    
    const api = axios.create({
    baseURL:  RESTURL,
      headers:{ "Content-type" : "application/json" }
    })

    export default boot(({ app }) => {
    
      app.config.globalProperties.$axios = axios
      
      app.config.globalProperties.$api = api
      
      app.config.globalProperties.$RESTURL = RESTURL
    })

    export { api, RESTURL }

你可以试试这个！
并在javascript页面中使用新的格式化axios。

this.$api.post("/customer/login", data)
          .then(res => {
            if (res.status == 200){
              this.errorMessage = ""
              this.store.loggedUser = res.data
              this.$router.push('/')
            }
          })
          .catch((err) => {
            this.errorMessage = "Wrong Mail / Password"
          })

我的customer.model.js示例

const sql = require("./db");

    //Constructor
    const Customer = function (customer) {
        this.name = customer.name;
        this.mail = customer.mail;
        this.password = customer.password;
        this.address = customer.address;
        this.postCode = customer.postCode;
        this.city = customer.city;
    };

    Customer.getAllRecords = (result) => {
      sql.query("SELECT * FROM Customer", (err, res) => {
        if (err) {
            console.log("Query error: " + err);
            result(err, null);
            return;
        }
        result(null, res);
      });
    };

    Customer.create = ( newCustomer, result ) => {
      sql.query("INSERT INTO Customer SET ?", newCustomer, (err, res) 
    => {
        if (err) {
            console.log("Query error: " + err);
            result(err, null);
            return;
        }
        console.log("Created Customer: ", {
            id: res.insertId,
            ...newCustomer
        });
        result(null, {
            id: res.insertId,
            ...newCustomer
        });
      })
    }

    Customer.updateByID = (id, data, result) => {
      sql.query(
        "UPDATE Customer SET name=?, mail=?, password=?, address=?, 
    postCode=?, city=? WHERE id=?",
        [data.name, data.mail, data.password, data.address, 
    data.postCode, data.city, id],
        (err, res) => {
            if (err) {
                console.log("Query error: " + err);
                result(err, null);
                return;
            }
            if (res.affectedRows == 0) {
                //this id not found
                result({ kind: "not_found" }, null);
                return;
            }
            console.log("Updated Customer: ", { id: id, ...data });
            result(null, { id: id, ...data });
        }
      );
    };

    Customer.delete = ( id, result ) => {
      sql.query("DELETE FROM Customer WHERE id = ?", id, (err, res) 
    => {
        if (err) {
            console.log("Query error: " + err);
            result(err, null);
            return;
        }    if(res.affectedRows == 0){
            result({kind: "not_found"}, null)
            return;
        }
        console.log("Deleted Customer id: ", id)
        result(null, {id: id})
      });
    }

    Customer.login = (account, result) => {
      sql.query(
        "SELECT * FROM Customer WHERE mail = ?", account.mail,
        (err, res) => {
            if (err) {
                console.log("Query error: " + err);
                result(err, null);
                return;
            }
            if (res.length) {
                const validPassword = account.password == 
    res[0].password

                if (validPassword) {
                    result(null, res[0]);
                    return;
                } else {
                    console.log("Password invalid.");
                    result({ kind: "invalid_pass" }, null);
                    return;
                }
            }
            result({ kind: "not_found" }, null);
        }
      );
    };

    module.exports = Customer

赞(0）回复(0）举报 2022-11-30

0tdrvxhp5#

我遇到了同样的问题，我解决了它。你可以尝试每15分钟重新启动一次API。它在第二次对我有效。但我不知道为什么。

赞(0）回复(0）举报 2022-11-30