Vuejs 中的 State 突变

Question

I am using vuetify with vuejs to add a sidebar to my web app using the <v-navigation-drawer> component. Everything works as expected, however, when I click outside the sidebar component, I get a warning about mutating state (the drawer variable). The warning does not happen if I close the sidebar by using the button that I have added to it. You can see the warning here: warning regarding state

You can see my code here:

// sidebar.vue

<template>
  <v-navigation-drawer
    v-if="li"
    v-model="drawer"
    clipped="clipped"
    app
    height="100vh"
    floating
    disable-route-watcher
    fixed
    temporary
  >
    <v-list-item class="px-2">
      <v-list-item-avatar>
        <v-img src="/assets/logo.svg" contain alt="logo"></v-img>
        <!-- <v-icon>mdi-account</v-icon> -->
      </v-list-item-avatar>
      <v-list-item-title>{{ username }}</v-list-item-title>
      <v-btn icon @click.stop="toggleDrawer">
        <v-icon>mdi-chevron-left</v-icon>
      </v-btn>
    </v-list-item>
    <v-divider></v-divider>
    <v-list dense>
      <v-list-item
        v-for="item in items"
        :key="item.title"
        link
        @click="changeRoute(item.route)"
      >
        <v-list-item-icon>
          <v-icon>{{ item.icon }}</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>
    <v-spacer></v-spacer>
    <v-list dense style="position: absolute; bottom: 0; width: 100%">
      <v-list-item @click="logout">
        <v-list-item-icon>
          <v-icon>mdi-logout-variant </v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>Sign out</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-list-item @click="toggleDarkMode">
        <v-list-item-icon>
          <v-icon>mdi-theme-light-dark </v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>{{ darkModeButtonText }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from "vue-property-decorator";

@Component
export default class Sidebar extends Vue {
  @Prop() li!: boolean; // li = Logged In
  @Prop() username!: string;
  @Prop() darkModeButtonText!: string;
  @Prop() darkModeState!: boolean;
  @Prop() drawer!: boolean;
  @Prop() clipped!: boolean;

  @Emit("toggleDarkMode")
  toggleDarkMode() {
    return;
  }

  @Emit("logout")
  logout() {
    console.log(""); // method needs something in to avoid prettier rules, doesn't need to do anything, just emits
  }

  @Emit("toggleDrawer")
  toggleDrawer() {
    return;
  }

  changeRoute(newPath: string) {
    if (this.$route.path !== newPath) {
      this.$router.push(newPath);
    }
    return;
  }

  data() {
    return {
      items: [
        {
          title: "New Assessment",
          icon: "mdi-molecule-co2",
          route: "/assessment",
        },
        { title: "Home", icon: "mdi-home", route: "/landing" },
        { title: "About", icon: "mdi-information-outline", route: "/about" },
      ],
    };
  }
}
</script>

The drawer variables is defined in data() in the parent component of sidebar.vue and I'm using @Emit to change the variable state (the toggleDrawer() function).

Is there anything obviously wrong that I'm doing? I was following the examples HERE

I should mention I'm new to vuejs and vuetify.

Thanks in advance.

Answer 1

The proper way to mutate parent data is to send it a message, letting the component that 'owns' the data mutate it. v-model is usually just sugar for :value and @input , so replace and forward.

sidebar

Add a prop to sidebar called drawer

<v-navigation-drawer
    v-if="li"
    :value="drawer"
    @input="$emit('update:drawer', $event)"

props: {
  drawer:{}
}

parent

<sidebar :drawer='drawer' @update:drawer='drawer=$event' />

data() {
 return {
   drawer: false
 }
}

Other Options

You can also use a reactive store, such as Vuex to hold the value, and then your message and binding would be directed to the store instead of emitted to the parent.