Vuex의 데이터 프로펠러 상태/게터 통과 방법

Vuex의 데이터 프로펠러 상태/게터 통과 방법

vuex 아래의 Axios를 사용하여 데이터베이스에서 데이터를 검색했습니다.

const state = {
    giveaways: null
}

const actions = {
    getGiveAways : ({commit}) =>{

        axios({
            url : '/prod/api/thresholds_settings',
            method: 'post',
            data : {
            },
            config: 'JOSN'
        })
        .then(response=>{
            if(response.status == 200){
                //console.log(response.data.total_giveaways);
                commit('SET_GIVEAWAYS', response.data.total_giveaways)
            }
        })
        .catch(error=>{
            if(error.response){
                console.log('something happened')
            }
        });
    }
}

const mutations = {
    SET_GIVEAWAYS : (state, obj)=>{
        state.giveaways = obj
    }

}

const getters = {
    doneGiveAways(state){
        return state.giveaways
    }
}

[대시.내가 가진 vue

import {mapState,mapGetters} from 'vuex'
export default{
    data: () => ({
        cards: [],
        giveaways: ''
    }),
    computed:{
        ...mapState({
            Giveaway: state => state.Threshold.giveaways
        }),
        doneGiveAways(){
            return this.$store.getters.doneGiveAways
        }
    },
    ready(){
        //giveaways: this.Giveaways
        //console.log(this.Giveaways);          
    },
    created(){
        const self = this
        this.cards[0].result_val = 2
        this.cards[2].result_val = 2;

    },
    mounted(){
        this.$store.dispatch('getGiveAways');
        console.log(this.giveaways);

    }
}

문제는 mapState에서 값을 전달해야 한다는 것입니다.Giveaway내 반환 데이터로giveaways: ''페이지가 기동했을 때, 다음의 방법으로 응답치를 취득할 수 있습니다.this.giveaways제 html에서 {{ Giveaway }}을(를) 호출하면 값이 표시됩니다.근데 이런 걸 만들어야 돼this.giveaways = this.$store.state.Thresholds.giveaways

Stephan-v의 추천을 사용하여 로컬 복사본을 삭제합니다.giveaways하지만, 당신이 추가 복사본을 선언한 이유가 무엇인지 모르겠습니다.giveaways다음과 같은 방법으로 대응할 수 있습니다.

고객님의 고객명Dashboard.vue추가:

export default {
    ...
    watch: {
        Giveaway(value) {
            this.giveaways = value
        }
    },
    ...
}

삭제만 하면 됩니다.giveaways데이터 개체에서 속성을 추출하고 계산된 이름을 바꿉니다.doneGiveAways로.giveaways그럼 끝이야

로컬 컴포넌트는 필요 없습니다.giveaway이 시나리오에서는 데이터 속성입니다.

언급URL : https://stackoverflow.com/questions/47665924/vuex-how-to-pass-state-getter-in-data-prop