1
votes

Tiroir de navigation VueJS + Vuex + Vuetify

J'ai une page avec une barre d'outils et une barre latérale. La barre latérale n'est visible que lorsqu'un utilisateur est connecté. La barre latérale Tiroir de navigation n'est pas visible par défaut si l'utilisateur est sur un appareil mobile. < / p>

Maintenant, je veux un bouton dans la barre d'outils pour que l'utilisateur puisse ouvrir la barre latérale. Mais la barre d'outils et la barre latérale sont deux composants différents. Par conséquent, j'utilise Vuex pour gérer l'état. Mais l'état est computet et n'a pas de setter, donc je ne peux pas utiliser l'état direct dans le v-model des contrôleurs de navigation.

Maintenant, j'ai lu que vous pouvez définir une méthode get et une méthode set sur des variables calculées. Mais est-ce la meilleure façon de procéder?

javascript vuejs2 vuetify.js

1 commentaires

Avec un exemple de code, ce serait mieux.

3 Réponses :

0
votes

La façon dont vuex veut que vous fassiez est d'utiliser la mutation d'état appropriée.

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

Et la valeur calculée réagira à la mutation.

0 commentaires

0
votes

Sur votre composant de barre d'outils , c'est là que vous voulez votre bouton; Définissez une propriété booléenne de tiroir. Le code HTML avec le bouton dans le composant de la barre d'outils ressemblerait à ceci:

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

Dans le composant de la barre d'outils parent, vous voudriez également déclarer une variable de tiroir. Ensuite, le html ressemblerait à ceci:

<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 est votre composant de barre d'outils que j'ai mentionné plus tôt.

Vous noterez que le tiroir de navigation écoute maintenant la propriété du tiroir.

S'il vous plaît laissez-moi savoir si cette réponse ne suffit pas, je vais créer un exemple pour vous p >

0 commentaires

2
votes

dans votre modèle:

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
    },
  },
}

Dans votre module de magasin toolbar.js (ou le nom de votre module)

<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']),
  }
...

1 commentaires

Cela fonctionnait mieux pour mon cas d'utilisation isHomeNavigationDrawerOpen: null, pourrait être défini sur true / false en fonction de ce que vous vouliez que votre état initial soit.