如何在Vuex中获取mutation执行后的状态值？

嘿，我来帮你搞定这个问题！其实Vuex的mutation是同步修改状态的，所以只要mutation执行完成，对应的状态就已经更新了，你可以通过这几种方式获取最新值：

1. 通过映射的Getters直接获取（最推荐） #

你已经在Vuex模块里定义了date和daysInMonth这两个getters，而且组件里用了mapGetters把它们映射成了计算属性。因为Vue的响应式系统会自动追踪state的变化，当mutation修改了state.date后，getters会立即更新，对应的计算属性也会同步刷新。

比如在你的组件里，调用mutation之后直接访问this.date就能拿到最新的日期：

import { mapGetters, mapMutations } from 'vuex';
export default {
  computed: {
    ...mapGetters(['date', 'daysInMonth'])
  },
  methods: {
    ...mapMutations(['subtractOneDay'])
  },
  handleSubtractDay() {
    this.subtractOneDay();
    // 这里的this.date已经是减一天后的最新值了
    console.log('更新后的日期：', this.date.format('YYYY-MM-DD'));
  }
}

2. 直接访问Vuex的State #

如果你的组件没有映射getters，也可以直接通过this.$store.state来访问最新状态（如果是命名空间模块，要加上模块名，比如this.$store.state.dateModule.date）：

handleSubtractDay() {
  this.subtractOneDay();
  console.log('更新后的日期：', this.$store.state.date.format('YYYY-MM-DD'));
}

重要提醒：修复Moment对象的响应式问题 #

这里有个容易踩坑的点：你当前的mutation是直接修改原Moment对象的状态（state.date.subtract(1, 'days')），但Moment是可变对象，Vue的响应式系统无法检测到对象内部的变化，这会导致getters和组件视图无法自动更新！

正确的做法是创建一个新的Moment实例来替换原有的state值：

const mutations = {
  subtractOneDay(state) {
    // 基于原日期创建新实例，再修改后赋值
    state.date = moment(state.date).subtract(1, 'days');
  }
}

这样state.date的引用发生了变化，Vue就能检测到状态更新，确保getters和组件视图同步刷新。

内容的提问来源于stack exchange，提问作者user1692333