【问题标题】：Nuxt/Vue reactive body attributesNuxt/Vue 反应体属性
【发布时间】：2019-02-05 13:16:02
【问题描述】：

当我点击菜单汉堡 div 时，我想在 body 标签上添加类 menu-opened。

我的 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' : ''
        }
      }
    }
}

我的商店运行良好，当我点击我的 div 时值会发生变化，但它没有添加类，就像 head 函数不是响应式的......

感谢您的帮助

【问题讨论】：

能否展示包含<body>的代码/模板？
这是 nuxt HTML 模型：fr.nuxtjs.org/guide/views/#document

标签： vue.js vuex nuxt.js

【解决方案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

【讨论】：

如果我把它放在布局上，我会得到this.head is not a function 作为错误并且渲染失败
调用this.head()无效。
这是一个很好的答案，但仅适用于 nuxt。有问题的是 nuxt/vue，所以如果不喜欢它只是因为纯 vue 的用户。
这是一个老问题，但我设法在 Nuxt 中做到了，就像你的回答一样，我正在更新商店中的值并使用 default.vue 中的商店值来更新 bodyAttrs ...我只有一个问题，更新类时存在延迟，我可以看到 DevTools 中的值正在更新，但类没有同时更新……我在三个地方使用来自商店的相同值更新课程...我创建了一个 gif 以便更好地理解...任何人都知道我做错了什么...gifyu.com/image/FjPD

【解决方案2】：

你可以这样做：

我的 div

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

openMenu 方法

methods: {
     openMenu() {
       console.log('open menu launch')
       this.$refs.myDiv.closest('body').classList.add("menu-opened")
     }
    }

然后你需要为关闭菜单按钮实现类似的功能，只使用：

this.$refs.myDiv.closest('body').classList.remove("menu-opened")

【讨论】：