Vuex 커밋이 v-show를 트리거하지 않음

Vuex 커밋이 v-show를 트리거하지 않음

vuex를 처음 시도하고 있는데 스토어에서 변환 커밋 후 v-show 지시문이 트리거되지 않았습니다.

// store.js
import Vue from "vue"
import Vuex from "vuex"

const states = {
    app: {
        init: "APP_INIT"
    }
}

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        appState: ""
    },
    mutations: {
        changeAppState (state, appState) {
            state.appState = appState
        }
    },
    getters: {
        isVisible: state => state.appState === states.app.init
    }
})
export { store }

컴포넌트 A표시하다

<template v-show="isVisible">
    <div id="componentA"></div>
</template>

<script>
    export default {
        name: "ComponentA",
        computed: {
            isVisible () {
                return this.$store.getters.isVisible
            },
            appState () {
                return this.$store.state.appState
            }
        },
        watch: {
            appState (newVal, oldVal) {
                console.log(`Changed state: ${oldVal} => ${newVal}`)
            }
        },
        mounted () {
            setTimeout(() => {
                this.$store.commit("changeAppState", "APP_INIT")
            }, 1000)
        }
    }
</script>

<style scoped lang="scss">
    #componentA {
        width: 400px;
        height: 400px;
        background: red;
    }
</style>

정의했습니다.getter isVisible평가해야 할 것은true만약state.appState속성은 문자열과 동일합니다.APP_INIT돌연변이에 대한 확약이 반응 시스템을 작동시켜 시야를 다시 렌더링할 것이라고 생각했지만, 이는 일어나지 않았습니다. 왜일까요?

루트에 지시어를 적용할 수 없습니다.<template>이런 거죠.내부 요소를 사용해야 합니다.

<template>
  <div v-show="isVisible">
    ...
  </div>
</template>

데모

또, Vue docs 상태에도 주의해 주세요.

주의:v-show를 지원하지 않습니다.<template>또, 이 요소에서는 동작하지 않습니다.v-else.

언급URL : https://stackoverflow.com/questions/55172196/vuex-commit-does-not-trigger-v-show