切换 Vuetify 导航抽屉 v-modeled 到 Vuex 变量

Posted 2023-02-22

【中文标题】切换 Vuetify 导航抽屉 v-modeled 到 Vuex 变量

【英文标题】：Toggling Vuetify navigation drawer v-modelled to Vuex variable

【发布时间】：2020-07-13 16:20:31

【问题描述】：

（我发现了一些类似的问题，但似乎没有一个可以解决我的问题，但是如果我遗漏了什么，请参考。）

我正在使用 Vue、Vuex 和 Vuetify。从"Google Keep" example layout 开始，我分解出 NavDrawer 和 AppBar 组件。但是，我在让 NavDrawer 切换工作时遇到了一些问题。

在实现 Vuex 之前，我使用了 props 和 events，通过父组件。使用Vuex，我的代码如下：

ma​​in.js：

const store = new Vuex.Store(
  state: 
    drawerState: null
  ,
  mutations: 
    toggleDrawerState(state) 
      state.drawerState = !state.drawerState
    
  
)

AppBar.vue：

<template>
  <v-app-bar app clipped-left class="primary">
    <v-app-bar-nav-icon @click="toggleDrawer()"/>
  </v-app-bar>
</template>

<script>
export default 
  name: 'AppBar',
  methods: 
    toggleDrawer: function() 
      this.$store.commit('toggleDrawerState')
    
  

</script>

NavigationDrawer.vue：

<template>
  <v-navigation-drawer v-model="drawerState" app clipped color="grey lighten-4">
    <!-- content -->
  </v-navigation-drawer>
</template>

<script>
export default 
  name: 'NavigationDrawer',
  computed: 
    drawerState: 
      get: function()  return this.$store.state.drawerState ,
      set: () => null
    
  

</script>

NavDrawer 的计算属性中的set: () => null 是因为我一开始将它设置为调用突变，这导致了切换的反馈循环。

现在，我的问题是，给定 v-model 的初始值 null，Vuetify 会在桌面上打开抽屉并在移动设备上关闭。当调用drawerState = !drawerState 时，null 变为true，但这只是让抽屉在桌面上保持打开状态，这意味着必须再次单击该按钮才能关闭抽屉。在最初的双触发问题之后，它在桌面上运行良好。然而，在移动设备上，它总是需要两个触发器。 （我说的是移动设备，但实际上我只是缩小了浏览器窗口的大小。）我认为这是因为在调整大小（或加载时）时，抽屉会自动隐藏，但无法更新 Vuex 存储布尔值，这意味着双触发是必须的。

因此，我的问题是：实现 Vuetify 的 navdrawer 以便从另一个组件切换它的标准或最佳实践方法是什么？我认为状态（无论是打开还是关闭）可能会被直接存储，但是没有“打开”或“关闭”事件可以访问它。 （例如，this question 没有答案。）它在示例页面上运行良好，但如何将其调整为子组件？

谢谢！

【参考方案1】：

使用 Vuex getter 并在计算的 getter 中引用它们，以及在计算的 setter 中检索新值并使用它在存储中提交突变是一个不错的选择。所以你的商店会变成：

const store = new Vuex.Store(
  state: 
    drawerState: false
  ,
  mutations: 
    toggleDrawerState (state, data) 
      state.drawerState = data
    
  ,
  getters : 
    drawerState: (state) => state.drawerState
  
)

您的抽屉式导航组件将变为：

<template>
  <v-navigation-drawer v-model="drawerState" app clipped color="grey lighten-4">
    <!-- content -->
  </v-navigation-drawer>
</template>

<script>
export default 
  name: 'NavigationDrawer',
  computed: 
    drawerState: 
      get ()  return this.$store.getters.drawerState ,
      set (v)  return this.$store.commit('toggleDrawerState', v) 
    
  

</script>

这是一个代码笔来展示一个完整的例子： https://codepen.io/JamieCurnow/pen/wvaZeRe

【讨论】：

谢谢杰米！像魅力一样工作。