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>

demo

还要注意Vue docs的状态：

请注意，v-show不支持<template>元素，也不支持v-else。

Vuex提交不会触发v-show

1 个答案: