Page Code:
<div class="btn-fullscreen" @click="switchFullscreen()">
<el-tooltip effect="dark" placement="bottom" :content="fullscreen?``:``">
<i class="el-icon-rank"></i>
</el-tooltip>
</div>
<script>
import { mapState, mapActions } from "vuex"
export default {
computed: mapState({
fullscreen: state => state.fullscreen
}),
methods: mapActions("header", [
"switchFullscreen"
])
}
</script>Store:
// initial state
const state = {
collaspe: false,
fullscreen: false
}
// getters
// actions
const actions = {
switchFullscreen ({ state, commit }) {
commit("setFullscreenState")
}
}
// mutations
const mutations = {
setFullscreenState (state) {
state.fullscreen = !state.fullscreen
}
}
export default {
state,
actions,
mutations
}
after clicking the button, tracking the values in Devtool and state.fullscreen will change
"" fullscreen
it seems that the fullscreen on the page and the fullscreen in state are not bound together. No matter what the default value of fullscreeen in state is changed to, the page will display "full screen"
after initialization.