nuxt实现全局状态管理导航切换优化
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了nuxt实现全局状态管理导航切换优化相关的知识,希望对你有一定的参考价值。
参考技术A 那么,Nuxt.js 自动生成的路由配置大致如下:样式添加:
nuxt路由自动生成,这个时候我们可以自己定义一个route插件
在nuxt.config中添加插件
这样就实现了我想要的效果了,有更好的方法欢迎交流学习。
在 Nuxt 中切换导航动画
【中文标题】在 Nuxt 中切换导航动画【英文标题】:Toggle nav animation in Nuxt 【发布时间】:2021-08-14 10:04:24 【问题描述】:在将导航切换到视图时,我有一个使用 GSAP
的简单动画。我正在 Nuxt/Vue 中构建这个网站(这对我来说是新的)所以我认为问题可能在于我如何构建我的功能。
我的导航切换按钮和导航布局位于两个独立的组件中,因此我使用Vuex
在它们之间传递数据以添加/删除活动状态。逻辑/动画适用于页面加载,单击切换以激活导航并查看动画中的加载。问题是在关闭时动画菜单。出于某种原因,我不断收到Cannot read property 'querySelectorAll' of undefined
,我认为这是由于Nuxt s-s-r
在页面加载时运行并尝试运行animateNavOut
函数(当它不应该运行时)。
正如我所提到的,Vue/Nuxt 对我来说是新的,所以任何建议让这个代码工作/更好的方式来做这件事将不胜感激。
导航组件
<template>
<transition name="card">
<div class="nav" :class="toggleNav()">
<div class="nav__panel">
<div class="nav__panel-inner">
<div class="nav__panel-contact">
<div class="h-3">Contact Us</div>
<ul>
<li>
<a href="tel:07498-916-341">+44(0)7498 916 341</a>
</li>
</ul>
<div class="nav__panel-social">
<SocialLinks />
</div>
</div>
</div>
</div>
<div class="nav__panel">
<div class="nav__panel-inner">
<nav class="nav__panel-nav">
<ul>
<li>
<NuxtLink to="/">Home</NuxtLink>
</li>
<li>
<NuxtLink to="/about-us">About Us</NuxtLink>
</li>
<li>
<NuxtLink to="/our-expertise">Our Expertise</NuxtLink>
</li>
<li>
<NuxtLink to="/contact-us">Contact Us</NuxtLink>
</li>
</ul>
</nav>
</div>
</div>
</div>
</transition>
</template>
<script>
import gsap from 'gsap'
export default
data()
return
isActive: 'is-active',
,
methods:
toggleNav()
if (this.$store.state.navIsActive === true)
this.animateNavIn()
return this.isActive
else
this.animateNavOut()
,
animateNavIn()
console.log('animate in')
const TL = gsap.timeline()
TL.to('.nav__panel-nav ul li a',
duration: 1,
autoAlpha: 1,
y: 0,
stagger: 0.05,
ease: 'Power2.out',
).to(
'.nav__panel-contact .h-3, li, .social__title, .social__links',
duration: 1,
autoAlpha: 1,
y: 0,
stagger: 0.05,
ease: 'Power2.out',
,
'-=.9',
)
,
animateNavOut()
console.log('animate out')
const TL = gsap.timeline()
TL.to('.nav__panel-nav ul li a',
duration: 1,
autoAlpha: 0,
y: '15px',
stagger: 0.05,
ease: 'Power2.out',
)
,
,
</script>
导航切换
<template>
<button class="nav-toggle" :class=" 'is-active': isActive " @click="navToggle()">
<span></span>
</button>
</template>
<script>
export default
data()
return
isActive: false,
,
computed:
// Return default/current value for nav status from VUEX using Getter
navState()
return this.$store.getters.navState
,
,
methods:
navToggle()
// Set toggle active state
this.isActive = !this.isActive
// Update nav status by passing state back into VUEX using mutations
if (this.$store.state.navIsActive === false)
this.$store.commit('setNavState', true)
document.getElementsByTagName('body')[0].classList.add('no-scroll')
else
this.$store.commit('setNavState', false)
document.getElementsByTagName('body')[0].classList.remove('no-scroll')
,
,
</script>
Vuex 商店
export const state = () => (
navIsActive: false
);
export const getters =
// Retrieve info from Store or use computed property, but a getter can be used everywhere
navState(state)
return state.navIsActive;
export const mutations =
// Update nav status based on payload passed in via method function in component
setNavState(state, payload)
state.navIsActive = payload;
【问题讨论】:
【参考方案1】:我从未尝试过导入原版 GSAP 包,但 Nuxt 运行良好且安装简单:nuxt-gsap-module
querySelectorAll
确实有一个错误,问题是你不应该在像 VueJS 这样的 SPA 中使用这种选择器。你应该使用$refs
,如documentation所示,像这样
<base-input ref="usernameInput"></base-input>
<script>
// ...
this.$refs.usernameInput
</script>
阅读此页面,您可以在其中看到一些关于如何使用 GSAP 制作动画的 VueJS 示例:https://vuejs.org/v2/cookbook/editable-svg-icons.html#Animatable-Icons
【讨论】:
以上是关于nuxt实现全局状态管理导航切换优化的主要内容,如果未能解决你的问题,请参考以下文章
小程序全局状态管理,在页面中获取globalData和使用globalSetData
Vuex 全局状态更改不会触发 Nuxt 中 v-for 循环中的重新渲染组件
在Solana中使用固定PDA账号实现管理员权限验证和全局状态变量保存