变异函数不影响状态变量

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 ，有你无法套用您的状态突变。 使突变机制获取每个函数的state ，然后只需将其用作当前函数内部的局部变量即可。