Как получить значение после мутации в Vuex?

Question

Как получить значение после мутации в Vuex?

1

У меня есть простой модуль Vuex для глобального объекта даты:

import moment from 'moment';

const state = {
    date: moment()
}

// getters
const getters = {
    date: state => state.date,
    daysInMonth: state => state.date.daysInMonth()
}

// mutations
const mutations = {
    subtractOneDay(state) {
        state.date.subtract(1, 'days');
    }
}

export default {
    state,
    getters,
    mutations
}

Один из моих дочерних компонентов:

import { mapGetters, mapMutations } from 'vuex';

export default {
    computed: Object.assign(mapGetters(['date', 'daysInMonth']), {}),
    methods: {
        subtractOneDay() {
            this.$store.commit('subtractOneDay');

            console.log(this.date.format('YYYY-MM-DD'), this.date.daysInMonth(), this.daysInMonth)
        }
    },
    created() {
        console.log('blocks created')
    },
    mounted() {
        console.log('blocks mounted')
    }
}

В основном мне нужно получать дни месяца (29, 29, 30 или 31), когда date изменена.

Проблема в том, что вычисляемое свойство daysInMonth не изменяется...

user1692333 04 май 2018, в 15:13

Источник

Теги:

javascript

vue.js

vuex

getter-setter

1 ответ

Ещё вопросы

Bert · Accepted Answer · 2018-05-04T11-36-00.000Z

Метод subtract моментов мутирует связанный объект момента. Это проблема для Vue, потому что это означает, что ссылка на state.date не изменилась, и вычисляемые свойства не будут повторно вычислять их значение.

Вы можете обойти это с помощью метода clone чтобы вернуть новый момент в методе subtractOneDay.

Вот пример.

console.clear()

const store = new Vuex.Store({
  state:{
    date: moment()
  },
  getters:{
    date: state => state.date,
    daysInMonth: state => state.date.daysInMonth()
  },
  mutations: {
    subtractOneDay(state) {
        state.date = state.date.clone().subtract(1, 'days');
    }
  }
})

new Vue({
  el: "#app",
  store,
  computed: Object.assign(Vuex.mapGetters(['date', 'daysInMonth']), {}),
  methods:{
    subtractOneDay(){
      this.$store.commit('subtractOneDay');
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  {{date}}
  <hr>
  {{daysInMonth}}
  <hr>
  <button @click="subtractOneDay">Subtract 1 Day</button>
</div>

commit запускает мутацию subtractOneDay , да. Но в subtractOneDay сам объект даты изменяется, он не превращается в новую дату. Из-за этого Вью не знает, что изменилось. Решение состоит в том, чтобы установить date для нового объекта момента.