Question

在我的一个商店模块（modal.js）中，我有一个对话状态变量和一个setDialogState突变，该突变为dialog分配了一个值。

从组件调用setDialogState时，dialog的值不变。我知道这是因为this.$store.state.modal.dialog的值没有更改，而且Vue Devtools扩展也显示了dialog的相同旧值。

这是怎么回事？

在我的商店模块store/modules/modal.js中：

const state = {
  dialog: false
}

const mutations = {
  setDialogState (state, payload) {
    this.state.dialog = payload;
    console.log(this.state.dialog); // strangely, this correctly logs the new value
  }
}

export default {
  namespaced: true,
  state,
  mutations
}

在我的组件中：

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      dialog: state => state.modal.dialog
    })
  },
  mounted() {
    console.log(this.$store.state.modal.dialog);
    this.$store.commit('modal/setDialogState', true);
    setTimeout(()=> {
      console.log(this.$store.state.modal.dialog);
    }, 2000); // this should log the new value, yet it still logs the old value
  }
}
</script>

Answer 1

您正在尝试通过引用state访问this，因此您无法应用状态更改。 mutation mechanism可以在每个函数中获取state，然后只需将其用作当前函数内部的局部变量即可。

变异函数不影响状态变量

1 个答案: