首页 文章

Vuex如何在数据道具中传递state / getter

提问于
浏览 次
1

我在我的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
    }
}

在我的Dashboard.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中调用{}，它会显示值 . 但我需要做一些像 this.giveaways = this.$store.state.Thresholds.giveaways

javascript vue.js vuex

2 回答

  • 0

    我会使用Stephan-v的建议并删除 giveaways 的本地副本 . 但是我不知道你宣布 giveaways 的额外副本的具体原因是什么，所以这里有一个可行的解决方案：

    在你的 Dashboard.vue 添加：

    export default {
    ...
    watch: {
        Giveaway(value) {
            this.giveaways = value
        }
    },
    ...
}
    回复于
  • 2

    只需从数据对象中删除 giveaways 属性，然后将计算出的 doneGiveAways 重命名为 giveaways 即可 .

    在此方案中，不需要本地组件 giveaway 数据属性 .

    回复于

相关问题