nuxtjs布局上的asyncData函数

Question

在Vuetify示例后，我尝试将代码从index.vue提取到layouts/default.vue下的自己的布局。

然而，这不起作用，有一个警告，侧边栏属性未在模板数据功能下定义，因此侧边栏不会切换，如何在默认布局上定义侧边栏切换功能？这是否意味着我不能在布局上使用与页面相同的属性？

编辑：

我设法通过使用带有以下简单代码的vuex商店来更改侧边栏的显示方式：

//store/index.js
export const state = {
  sidebar: false
}

export const mutations = {
  toggleSidebar(state) {
    state.sidebar = !state.sidebar
  }
}

//layouts/default.vue
<script>
import {mapState, mapMutations} from 'vuex'
export default {
  computed: {
    ...mapState({
      sidebar: state => state.sidebar
    })
  },
  methods:{
    ...mapMutations([
      'toggleSidebar',
    ])
  }
}
</script>

这会使侧边栏由商店管理，但是当在侧边栏区域外单击时关闭侧边栏但不更新侧边栏计算属性时，不会调用toggleSidebar函数。