Блог

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

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

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

ДЕМОНСТРАЦИЯ

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

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