vue.js - Nuxt/Vue react 体属性

Question

我想添加类(class) menu-opened在 body当我点击菜单汉堡 div 时标记。

我的 div

<div v-on:click="openMenu"></div>

openMenu 方法

methods: {
     openMenu() {
       console.log('open menu launch')
       this.$store.dispatch('menu/setMenu', true)
     }
    }

我的店铺

state = {
    isMenuOpen: false
}

actions = {
    setMenu({ commit }, value) {
      commit('SET_MENU_OPEN_STATUS', value)
    }
}

mutations= {
    SET_MENU_OPEN_STATUS(state, newState){
        state.isMenuOpen = newState
    }
}

在我的模板上，我使用以下代码根据 isMenuOpen 值的状态在主体上添加类:

export default {
    data() {
        return {
           menuState: this.$store.state.isMenuOpen
        }
    },
    head () {
      return {
        bodyAttrs: {
          class: this.menuState ? 'menu-opened' : ''
        }
      }
    }
}

My store is working well, the value change when I click on my div, but it's not adding the class, like if the head function is not reactive...

谢谢你的帮助

Answer 1

在 Nuxt
这是因为 head 方法仅在初始页面加载时调用一次。如果您想更新这些值，您可以，但您需要调用 head()再次发挥作用。
你可以用 watcher 来做到这一点或者你可以从你的商店调用它。
一种快速而肮脏的方法是结合计算属性和观察者..

export default {
    data() {
        return {
           menuState: this.$store.state.isMenuOpen
        }
    },
    head () {
      return {
        bodyAttrs: {
          class: this.isMenuOpen ? 'menu-opened' : ''
        }
      }
    },
   computed: {
     isMenuOpen () {
       return this.$store.state.isMenuOpen
     }
   },
   watch: {
     isMenuOpen () {
       this.head()
     }
   }
}

在 Vue
您需要关注 mounted 之类的事件或 beforeDestroy在那里描述
https://vuejs.org/v2/guide/instance.html
并使用纯 js 修改 dom 之类的

const bodyElement = document.querySelector('body')
bodyElement.classList.add('a');
bodyElement.classList.remove('b');
bodyElement.classList.toggle('c');

https://developer.mozilla.org/pl/docs/Web/API/Element/classList