vuex를 사용하여 다른 구성 요소의 Vue 제어 및 업데이트 상태

vuex를 사용하여 다른 구성 요소의 Vue 제어 및 업데이트 상태

예를 들어 App.vue라는 파일이 있고 여기에 네비게이션 드로어 컴포넌트가 있습니다.그리고 집이라는 파일이 있어요도구 모음 구성 요소를 사용합니다.문제는 홈에서 내비게이션 드로어 상태(true 또는 false)를 전환해야 한다는 것입니다.vue의 도구 모음 구성 요소(또한 탐색 드로어 구성 요소는 Home.vue에 렌더링됩니다).아래 코드는 오류를 반환하지 않으며 내비게이션 드로어의 가시성을 변경하지 않습니다.또한 store.js에서 수동으로 상태를 설정하면 탐색 드로어가 그 뒤를 따릅니다.누가 좀 도와줄래요?

store.displaces를 설정합니다.

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>

이것은 오래된 게시물입니다만, 만약 누군가가 답을 찾으러 온다면, 이것은 효과가 있는 것 같습니다.

Vuex 가이드, 양식 처리 섹션, 양방향 계산 속성

Sovalina(고마워!) link의 코드&박스를 수정했습니다.

다른 방법은 v-model을 사용하는 것입니다.

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

내비게이션 드로어의 속성을 사용할 수 있습니다.permanentv-model 대신 (vuex 외부에서 스토어가 변환되지 않도록) getter를 사용합니다.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매장에서는 커밋 대신 디스패치를 사용할 수 있습니다.

여기의 실제 예

언급URL : https://stackoverflow.com/questions/51009547/vue-control-and-update-state-from-another-component-with-vuex