Vuex commit не запускает v-show

Question

Я пытаюсь 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 }

ComponentA.vue

<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. Я думал, что фиксация на мутации вызовет реактивную систему и вызовет повторную визуализацию представления, но этого не происходит. Почему?

Answer 1

Директивы не могут применяться к корню <template> таким образом. Вы должны использовать внутренний элемент:

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

демо

Также обратите внимание на состояние Vue docs :

Обратите внимание, что v-show не поддерживает элемент <template> и не работает с v-else.