小编Aad*_*sji的帖子

我已经为要放置在网站中的过渡功能实现了此代码，但由于某种原因它不起作用。单击按钮时，过渡应该起作用。

我添加了我主要使用的 HTML、Javascript 和 CSS 代码，它们链接到我需要的过渡功能。

我希望有人可以帮助我。提前谢谢了！

HTML：

<transition name="fade" mode="out-in">
                        <div class="plain-slider w-slider">
                            <div class="mask w-slider-mask">
                                <div class="slide-padding w-slide">
                                    <div class="testimonial">
                                        <div class="testimonial-name>
                                            <p class="s"></p>
                                            <div class="testimonial-text">
                                                {{testimonialData[number].comments}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="testimonial-row">
                                        <div class="column w-col w-col-3">
                                            <div class="testimonial-image">
                                                <img class="displayPic" alt="Display Picture" v-bind:src="testimonialData[number].userPic" />
                                            </div>
                                        </div>
                                        <div class="testimonial-name w-col">
                                            <div class="blue bold">
                                                {{testimonialData[number].name}}
                                            </div>
                                            <div class="ratingStars">
                                                <img class="rate" src="~/assets/Images/All/svgs/svg/star.svg" alt="Review Star Icon" v-for="n in testimonialData[number].stars"
                                                    :key="n" />
                                            </div>
        
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </transition>
    <button class="next" @click="increment"> > …

我在 layouts 文件夹中创建了一个 error.vue 文件，它应该显示 400、404、410 和 500 错误的 UI。但是，它没有显示我创建的那些，它仍然显示默认的 NuxtServerError 页面。

所以，我的问题是如何在页面中显示我创建的 UI。

下面是我在 layouts/error.vue 中使用的代码

HTML：

<template>
  <div class="error-container">
    <div class="error-content" v-if="error.statusCode === 404">
      <div>
        <h1>Sorry, the page you were looking for doesn't exist.</h1>
        <p>You can return to our <nuxt-link to="/">home page</nuxt-link> or <a href="mailto:contact@web.co">contact</a> us if you can't find what you are looking for.</p>
      </div>
      <img src="~/assets/Images/404.png">
    </div>

    <div class="error-content" v-if="error.statusCode === 400">
      <div>
        <h1>Sorry, the page you are looking for doesn't exist anymore.</h1>
        <p>You can return …

我localStorage用来设置和获取项目，这些项目放在.vue文件中的javascript代码中。但是，我想以某种方式访问​​该存储并将其放置在另一个文件中的Vuex存储部分中，最好是在突变中。

如果有人知道该怎么做，请您能帮忙吗？下面是我正在使用的localStorage的代码。

if(response.status === 200){
    console.log('TOKEN_SET', response)
    this.access_token = response.data.access_token
    localStorage.setItem(this.access_token, JSON.stringify(this.access_token));
};
mounted(){
    console.log('GOT_TOKEN')
    if(localStorage.getItem(this.access_token)) this.access_token = JSON.parse(localStorage.getItem(this.access_token))
}