I am experimenting with vuex for the first time, and I have come across an issue where a v-show directive is not triggering after a mutation commit on the store.
// 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>
I have set up a getter called isVisible that should return true if the state.appState matches the string APP_INIT.
I assumed that triggering a commit on the mutation would prompt the reactive system to re-render the view, but it seems like this is not happening. Why?