我没有对代码进行任何更改，现在当我启动我的网络应用程序时，出现“ TypeError: Cannot destruct property 'type' of 'vnode' as it is null. ”

Question

我有一个链接到 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)

`

我尝试重新启动网络应用程序，但出现同样的问题。

Answer 1

我的答案也很长，所以我会尝试缩短它，但它可以来自 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: "",

要使用它，它将是 this.store.whatyouwant = 你想要存储什么

Answer 2

现在对于潜在的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
};

Answer 3

您遇到的问题也可能来自 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);
};

Answer 4

可能是

axios.js

文件夹中的

src/boot/

文件有问题

    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

Answer 5

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