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账号实现管理员权限验证和全局状态变量保存

在Solana中使用固定PDA账号实现管理员权限验证和全局状态变量保存

原生 JavaScript 实现 state 状态管理系统

Vue笔记(Vuex全局状态管理器)