如何响应式显示Vuex状态？状态变更时同步更新展示内容

我有一个基于Vue.js和Vuex的项目，在Vuex Store中定义了page状态。Store文件夹下的index.js代码如下：

import { createStore } from "vuex"

export default createStore({
    state () {
        return {
            page: 'page-one'
        }
    },

    mutations: {
        changePage(state, page) {
            state.page = page
        }
    },
    getters: {
        getCurrentPage(state) {
            return state.page
        }
    }
})

我设置了几个按钮用于修改page状态，按钮代码如下：

<li class="app-section-link" @click="setPageTo('page-one')">1</li>
<li class="app-section-link" @click="setPageTo('page-two')">2</li>
<li class="app-section-link" @click="setPageTo('page-three')">3</li>

这些按钮位于PageChanger组件中，组件的方法代码如下：

export default {
    name: 'PageChanger',

    methods: {
        setPageTo: function(page) {
            this.$store.commit('changePage', page)
        }
    }
}

另外还有一个MainApp组件：

<template>
    <div class="main-app">
        {{ currentPage }}
    </div>
</template>

<script>
export default {
    name: 'MainApp',
    computed: {
        currentPage() {
            return this.$store.getters.getCurrentPage
        }
    }
}
</script>

应用加载时，main-app容器内显示page-one，但点击按钮后，虽然Vue DevTools显示page状态已变更，页面展示的文本却始终保持page-one，无法同步更新。

排查方向及修复步骤 #

1. 核对Vue与Vuex版本兼容性
   Vue 3必须搭配Vuex 4.x版本，Vue 2则对应Vuex 3.x。版本不匹配会导致状态变更无法触发视图更新。查看项目package.json里的版本号，若版本不符，执行对应命令调整：

• 升级到Vuex 4（Vue 3环境）：npm install vuex@4
• 降级到Vuex 3（Vue 2环境）：npm install vuex@3

2. 确认Store已正确注入Vue实例
   在项目入口文件（如main.js）中，必须将Store挂载到Vue实例上，否则组件无法共享同一Store实例：

// Vue 3 示例
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

// Vue 2 示例
import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

3. 检查是否存在多Store实例
   确保整个项目只创建一次Store实例，不要在组件内部重新实例化Store。如果存在多个Store实例，按钮修改的可能是另一个实例的状态，而MainApp监听的是原实例，自然不会同步更新。

4. 临时替换getter直接读取state排查
   修改MainApp的计算属性，直接返回this.$store.state.page：

computed: {
    currentPage() {
        return this.$store.state.page
    }
}

如果这样能正常更新，说明问题出在getter以外的环节；若仍不更新，回到前两步重点排查版本和Store注入问题。

内容的提问来源于stack exchange，提问作者Štěpán Žák