使用Vuex修改Vue Router嵌套组件内值的最佳实践咨询

数据老陈

2026-9-25

问题原因分析

组件data选项在实例初始化时仅执行一次赋值，你把this.$store.state.testNumber赋值给本地myNumber之后，后续Vuex的state更新不会同步到这个本地变量，自然DOM不会刷新。
你直接在HTML里用原生onclick绑定全局函数，这种写法在Vue项目里不属于推荐的最佳实践，尽量把交互逻辑放在Vue实例内部处理。

修复方案

方案1：直接在模板中引用Vuex state（最简方案）

无需定义本地data变量，直接在模板中调用$store的state值，天然具备响应性：

const Foo = { 
    template: '<div>{{ $store.state.testNumber }}</div>' ,
}

方案2：用计算属性监听state变化

如果组件需要对值做额外处理，可通过计算属性实现响应式同步：

const Foo = { 
    computed: {
        myNumber() {
            return this.$store.state.testNumber
        }
    },
    template: '<div>{{myNumber}}</div>' ,
}

方案3：用Vuex的mapState辅助函数简化写法

如果需要引用多个state值，用辅助函数可以大幅简化代码：

const Foo = { 
    computed: {
        ...Vuex.mapState(['testNumber'])
    },
    template: '<div>{{testNumber}}</div>' ,
}

额外优化建议

把按钮交互逻辑移到Vue实例内部，不要用原生onclick绑定全局函数：
修改HTML按钮代码：

<button class="btn" @click="incrementValueInComponent">Increment Number</button>

在根Vue实例中添加对应方法：

const app = new Vue({
  router,
  store, // 根实例注册store后所有子组件可直接访问$store，无需每个组件单独传入
  methods: {
    incrementValueInComponent() {
      this.$store.commit('increment');
      alert("number in the store is: " + this.$store.state.testNumber);
    }
  }
}).$mount('#app')