Vuex에서 변환 후 값을 얻는 방법

Vuex에서 변환 후 값을 얻는 방법

나는 심플하다.Vuexmodule for global date object:

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변하지 않아...

순간의subtractmethod는 참조되는 모멘트 객체를 변환합니다.이것은 Vue의 문제이며, 이는 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>

언급URL : https://stackoverflow.com/questions/50175623/how-to-get-value-after-mutation-in-vuex