Vuex 상태를 업데이트할 때 V-snackbar가 표시되지 않음

Vuex 상태를 업데이트할 때 V-snackbar가 표시되지 않음

난 왜 내가 이 일을 했는지 모르겠어<v-snackbar>Vuex 상태를 업데이트할 때 구성 요소가 표시되지 않습니다.

설정은 매우 간단합니다.Spackbar.js에 스낵바가 있는데 주의 변화를 듣고 있어요.

이 Spackbar.js는 App.vue에서 하위 구성 요소로 Import되므로 글로벌합니다.

다음으로 간단한 버튼이 있는 Test.vue가 있습니다.버튼을 클릭하면 State가 업데이트되고 스낵바가 렌더링되지만 그렇지 않습니다.

Chrome Vue Devtools의 Spanechbar 컴포넌트를 조사함으로써 데이터가 실제로 스토어에 도착하지만 테스트의 반응성 소품을 업데이트하지 않는다는 것을 알 수 있었습니다.표시하다

관련 코드는 다음과 같습니다.

---

스낵바.표시하다

<template>
  <v-snackbar v-model="show" :top="top" multi-line rounded="pill">
    {{ text }}
    <v-btn text @click.native="show = false">
      <v-icon>close</v-icon>
    </v-btn>
  </v-snackbar>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      show: false,
      text: '',
      top: true
    }
  },
  computed: {
    ...mapState(['snackbar'])
  },
  created: () => {
    this.unwatch = this.$store.watch(
      // watch snackbar state
      (state, getters) => getters.snackbar,
      () => {
        const text = this.$store.state.snackbar.text
        if (text) {
          this.show = true
          this.text = text
        } 
      }
    )
  },
  beforeDestroy () {
    this.unwatch()
  }
}
</script>

---

App.vue

<template>
  <v-app>
    <v-main>
      <!-- try to set a global snackbar -->
      <Snackbar/>
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>
import Snackbar from '@/components/Snackbar'

export default {
  name: 'App',
  components: {
    Snackbar
  }
}
</script>

---

Test.vue

<template>
    <v-btn @click="passData">Show snackbar</v-btn>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'Test',
  data: () => ({
    //
  }),
  computed: {},
  methods: {
    ...mapActions([
      'setSnackbar'
    ]),
    passData () {
      this.setSnackbar({
        text: 'Simple message',
        isActive: true
      })
    }
  }
}
</script>

---

Store/index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    snackbar: {
      isActive: false,
      text: ''
    }
  },
  getters: {
    snackbar (state) {
      return state.snackbar
    }
  },
  mutations: {
    populateSnackbar (state, payload) {
      state.snackbar.isActive = payload.isActive
      state.snackbar.text = payload.text
    }
  },
  actions: {
    setSnackbar (context, payload) {
      context.commit('populateSnackbar', payload)
    }
  }
})

위 코드는 생성된 후크로 인해 처음으로 스낵바가 표시되며, 다음부터는 Vue 반응성으로 인해 작동하지 않습니다.

여기서 상태가 업데이트되지만 스낵바 구성 요소의 데이터 속성이 업데이트된 데이터를 수신하지 못했습니다.

스낵바 구성 요소는 다음과 같이 교체할 수 있습니다.

<template>
  <v-snackbar v-model="snackbar.show" :top="top" multi-line rounded="pill">
    {{ snackbar.text }}
    <v-btn text @click.native="$store.dispatch('setSnackbar', {text: '', isActive: false})">
      <v-icon>close</v-icon>
    </v-btn>
  </v-snackbar>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['snackbar'])
  },

언급URL : https://stackoverflow.com/questions/63201573/v-snackbar-does-not-display-when-i-update-the-vuex-state