Управление Vue и обновление состояния из другого компонента с помощью Vuex - PullRequest
Новая
       13

Управление Vue и обновление состояния из другого компонента с помощью Vuex

0 голосов
/ 24 июня 2018

Например, у меня есть файл с именем App.vue, и там у меня есть компонент ящика навигации. И у меня есть файл с именем Home.vue с компонентом панели инструментов. Дело в том, что мне нужно переключать состояние ящика навигации (true или false) из компонента панели инструментов Home.vue (также компонент ящика навигации отображается в Home.vue). Приведенный ниже код не возвращает никаких ошибок и не меняет видимость навигационной панели. Также, если установить состояние вручную в store.js, за ним следует навигационная панель. Может кто-нибудь помочь, пожалуйста?

store.js 

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    drawer: false
  },
  mutations: {
    toggleDrawer: function(state) {
      return state.drawer = !state.drawer;
    }
  },
  actions: {
    toggleDrawer({ commit }) {
      commit('toggleDrawer');
    }
  },
  getters: {
    active: (state) => {
      return state.drawer;
    }
  }
})

App.vue 

<v-navigation-drawer v-model="drawer"> ... </v-navigation-drawer>

<script>
  import store from './store'
    export default {
      data: function() {
        return {
          drawer: this.$store.state.drawer
        }
      }
    }
</script>

Home.vue 

<v-toolbar-side-icon @click="$store.commit('toggleDrawer')"> ... </v-toolbar-side-icon>

<script>
  import store from '../store'
  export default {
    data: function() {
      return {
        drawer: this.$store.state.drawer // Seems like I don't need it here
      }
    }
  }
</script>

Ответы [ 2 ]

0 голосов
/ 05 октября 2018

Это более старая запись, но если кто-то ищет ответ, похоже, он работает.

из руководства Vuex, раздел Обработка форм, Двустороннее вычисляемое свойство

Я изменил коды и поле, предоставленные Совалина (спасибо!) ссылка

Другой способ - использовать v-модель 

<v-navigation-drawer v-model="drawer" app>

с двусторонним вычисляемым свойством вместо mapGetters 

<script>
    export default {
        computed: {
            drawer: {
                get () {
                    return this.$store.state.drawer
                },
                set (value) {
                    this.$store.commit('toggleDrawer', value)
                }
            }
        }
    }
</script>
0 голосов
/ 24 июня 2018

Вы можете использовать свойство ящика навигации permanent вместо v-модели (чтобы избежать изменения вашего магазина за пределами vuex) и использовать определенный вами получатель active.

App.vue: 

<template>
  <v-app >
    <v-navigation-drawer :permanent="active">
      ...
    </v-navigation-drawer>
  </v-app>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters([
        'active'
      ])
    },
  }
</script>

Home.vue: 

<template>
  <v-toolbar-side-icon @click="toggle"> ... </v-toolbar-side-icon>
</template>

<script>
  export default {
    methods: {
      toggle() {
        this.$store.dispatch('toggleDrawer')
      }
    }
  }
</script>

Примечание: поскольку вы определили действие toggleDrawer в своем магазине, вы можете использовать диспетчер вместо коммита.

Живой пример здесь

...