VueJS + Vuex + Vuetify 导航抽屉

Posted 2023-02-16

【中文标题】VueJS + Vuex + Vuetify 导航抽屉

【英文标题】：VueJS + Vuex + Vuetify Navigation Drawer

【发布时间】：2019-06-05 02:46:25

【问题描述】：

我有一个带有工具栏和侧边栏的页面。侧边栏仅在用户登录时可见。 如果用户在移动设备上，侧边栏Navigation Drawer 默认不可见。

现在我想要工具栏中的一个按钮，用户可以打开侧边栏。 但是工具栏和侧边栏是两个不同的组件。 因此我使用 Vuex 来管理状态。但是状态是computet并且没有setter，所以我不能直接在navigaion controllers v-model中使用状态。

现在我读到您可以在计算变量上定义 get 和 set 方法。 但这是最好的方法吗？

【问题讨论】：

加上一些示例代码会更好。

【参考方案1】：

vuex 希望你做的方式是使用正确的状态突变。

@click="$store.commit('open-sidebar')"

计算出来的值会对突变做出反应。

【参考方案2】：

在您的toolbar component 上，这是您想要按钮的位置；定义一个抽屉布尔属性。 toolbar component 中带有按钮的 html 看起来像这样：

<v-toolbar color="primary" dark app :clipped-left="$vuetify.breakpoint.mdAndUp" fixed>
        <v-toolbar-side-icon @click.stop="$emit('update:drawer', !drawer)"></v-toolbar-side-icon>

在toolbar component 父级中，您还需要声明一个抽屉变量。然后 html 看起来像这样：

<toolbar :drawer.sync="drawer"></toolbar>
            <v-navigation-drawer class="secondary" dark fixed :clipped="$vuetify.breakpoint.mdAndUp" app v-model="drawer">

toolbar 是我之前提到的toolbar component。

您会注意到导航抽屉现在正在监听抽屉属性。

如果这个答案不够，请告诉我，我会为你创建一个例子

【参考方案3】：

在您的模板中：

<template>
 <v-navigation-drawer
      :value="isHomeNavigationDrawerOpen"
      @input="TOGGLE_HOME_NAVIGATION_DRAWER"
      ...>
 </v-navigation-drawer>
</template>

<scripts>
import  mapState, mapActions  from 'vuex'
export default 

  computed: 
    ...mapState('userData', ['user', 'loggedIn']),
    ...mapState('toolbar', ['isHomeNavigationDrawerOpen']),
  ,
  methods:
    ...mapActions('toolbar', ['TOGGLE_HOME_NAVIGATION_DRAWER']),
  
...

在您的商店模块工具栏.js（或您的模块名称）中

export default 
  state: 
    isHomeNavigationDrawerOpen: null,
  ,
  actions: 
    TOGGLE_HOME_NAVIGATION_DRAWER(context, open) 
      context.commit('TOGGLE_HOME_NAVIGATION_DRAWER', open)
    ,
  ,
  mutations: 
    TOGGLE_HOME_NAVIGATION_DRAWER: (state, open) => 
      state.isHomeNavigationDrawerOpen = open
    ,
  ,

【讨论】：

这对我的用例最有效 isHomeNavigationDrawerOpen: null, 可以设置为真/假，具体取决于您想要的初始状态。

它应该被标记为正确答案

【参考方案4】：

在 Vuetify 中，组件 v-navigation-drawer 发出一个名为“输入”的事件，供 v-model 使用。

当导航抽屉显示和关闭时触​​发此事件。如果我们在这两种情况下都调用 'toggle' 函数，我们将进入一个无限循环。

我有同样的问题，这就是发生在我身上的事情。