Vuex中state里的值变了，但页面没起效

Question

页面代码：

<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
}

点击按钮后，跟踪Devtool里， state.fullscreen里的值会变化

但按钮的提示一直是“全屏”，无论fullscreen的值怎么变

好像页面上的fullscreen和state里的fullscreen没有绑定在一起，我无论将state里的fullscreeen的默认值改成什么值，在初始化后页面都显示"全屏"

Answer 1

computed: mapState({
        fullscreen: state => state.fullscreen
    }),

这个地方出问题了，少了module名，谢谢各位

Answer 2

试试这个

<div class="btn-fullscreen" @click="switchFullscreen()">
<el-tooltip effect="dark" placement="bottom">
    <div slot="content">{{fullscreen?'取消全屏':'全屏'}}</div>
    <i class="el-icon-rank"></i>
</el-tooltip>
</div>

Answer 3

this.$nextTick(){}

用这个试试

Answer 4

会不会是样式问题遮挡？?