Nuxt / Vue反应体属性

Question

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

我的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值的状态在body上添加类：

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

我的商店运作良好，当我点击我的div时价值会发生变化，但它不会添加类，就像head函数没有被动反应一样...

谢谢你的帮助

Answer 1

这是因为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()
     }
   }
}