Vuex中state里的值變了，但頁面沒起效

頁面代碼：

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

點(diǎn)擊按鈕后，跟蹤Devtool里， state.fullscreen里的值會(huì)變化

但按鈕的提示一直是“全屏”，無論fullscreen的值怎么變

好像頁面上的fullscreen和state里的fullscreen沒有綁定在一起，我無論將state里的fullscreeen的默認(rèn)值改成什么值，在初始化后頁面都顯示"全屏"