v-on:click 永远不会触发 Nuxt 组件中的按钮，因为中间件

Posted 2023-02-23

【中文标题】v-on:click 永远不会触发 Nuxt 组件中的按钮，因为中间件

【英文标题】：v-on:click never firing on button in Nuxt component, because of middleware

【发布时间】：2020-09-04 16:12:10

【问题描述】：

我在其他问题的其他地方看到过这个，但还没有看到解决方案。我正在尝试使用一个按钮制作一个简单的 GDPR cookie 通知，该通知在点击时关闭。我处于通用模式，这意味着 mounted() 不可用，所以我试图通过 Vuex 设置 cookie。但是，我绑定到组件中按钮的点击事件没有触发。

编辑：在构建了我的应用程序的代码沙盒版本后，我通过并破解了我的 Nuxt 应用程序，直到找到导致问题的原因。事实证明，这是我的中间件，更具体地说，是我使用 fs-extra 库来读取 JSON 文件的事实。仍然不清楚为什么会发生这种情况，因此欢迎提出任何建议。下面的代码包括我的中间件。

components/CookieNotice.vue

<template>
    <div v-if="cookie != true" class="cookie_notice_wrap">
        <div class="cookie_notice">
            <p class="notice_message">This site uses cookies for analytics purposes.</p>
            <button @click.prevent="dismissNotification" class="notice_dismiss">Close</button>
    </div></div>
</template>

<script>
import  mapGetters  from "vuex";

export default 
    name: "CookieNotice",
    methods: 
        dismissNotification: function(e) 
            console.log("we clicked?");
            document.querySelector(".cookie_notice_wrap").classList.add("hidden_click");
            this.store.dispatch("cookieStateChange", true);
        
    ,
    computed: 
        ...mapGetters(["cookie"]),
    


</script>

来自store/index.js的操作

export const actions = 
    async getPosts( state, commit, dispatch ) 
        if (state.posts.length) 
            return
        

        try 
            await axios.get("/api/json-access");
        
        catch (err) 
            console.log(err);
        
    ,
    nuxtServerInit( state, commit, dispatch ,  req ) 
        dispatch("getPosts");

        const seen = this.$cookies.get("cookie_notice_seen");
        if (!seen) 
            dispatch("cookieStateChange", false);
        
    ,
    cookieStateChange(state, commit, dispatch, bool) 
        // this does set the cookie correctly, unsure if it will work the same when bound to the button click
        commit("updateCookie", bool);
        this.$cookies.set("cookie_notice_seen", bool, 
            path: "/",
            maxAge: 60 * 60 * 24 * 7
        );
    

~/middleware/api/json-access.js:

const fse = require('fs-extra');
import axios from 'axios';

const storeLocation = "middleware/full_site.json";

export default async function( store, route, redirect ) 
    const exists = await fse.pathExists(storeLocation);
    let posts;

    if (!exists) 
        await fse.ensureFile(storeLocation);
        posts = await postsFromWP();
        fse.writeJSON(storeLocation, posts);
    
    else 
        try 
            posts = await fse.readJSON(storeLocation);
        
        catch (err) 
            console.log(err);
        
    

    store.commit("updatePosts", posts);


async function postsFromWP() 
    const url = ".../example/json/file.json";
    const config =  headers:  "Accept": "application/json" ;
    let posts = await axios.get(url, config);

    posts = posts.data
        .filter(el => el.status === "publish")
        .map(( id, slug, title, excerpt, date, tags, content ) => (
            id, slug, title, excerpt, date, tags, content
        ));

    return posts;

我之前通过routes -> middleware 在nuxt.config.js 中配置了中间件，但目前将其设置为通过serverMiddleware 进行测试。我还添加了触发获取帖子的操作，以防这也是其中的一部分。这肯定达到了我对 Nuxt/Vue 理解的极限——我不知道为什么会发生这种情况，因此非常感谢任何智慧。

【问题讨论】：

minimal reproducible example?使用 codesanbox.io 或任何其他基于在线多文件节点的编辑器。换句话说，您发布的内容有效。这只能意味着您没有说明错误的原因，并且您的问题在技术上是无法回答的。

嗯，我复制了我认为会破坏的最少量的内容，正如你所说，它奏效了。所以我在我的原始应用程序中寻找，发现问题出在我的中间件上，出于某种原因。我用更多信息编辑了原始帖子。

【参考方案1】：

如果您最终处理类似的事情，fs 或 fs-extra 是您的罪魁祸首。您不能在客户端使用文件操作，这是发生这些中间件操作的时候（我认为）。仅当我删除中间件文件最顶部的 fs-extra 导入时，cookie 通知才完全起作用。