Question

我有一个仪表板页面，当我刷新页面时工作正常，我检索了我的数据。但是，当我转到其他链接并返回我的仪表板页面（上一页）时，它不会更新我的计算giveaways属性，它不会再返回数据但是在我的响应中仍然工作正常，因为我的计算属性只是没有渲染。我在我的vuex中使用了axios，我也尝试了this.$forceUpdate，但我不知道哪里是正确的地方。我试图做的就像每次他们去dashboard.vue页面时，无论是通过刷新还是vue-route它都应该重新更新计算属性，因为我从服务器端重新评估数据。

这是我的Dashboard.vue脚本

import {mapState} from 'vuex'
import { mapGetters } from 'vuex'

export default{
    ready(){
        this.loaded =false;

    },
    data: () => ({
        cards: [

        ],
        cards_offender:[

        ],
        //giveaways: '',

        loaded: true
    }),
    computed:{
        ...mapState({
            Giveaway: state => state.Threshold.giveaways
        }),
        ...mapGetters({
            //done : 'doneGiveaways',
            //Done : getter => getters.Threshold.doneGiveaways
        }),
        giveaways(){
            //this.$foreceUpdate();
            //this.$store.dispatch('getGiveAways');
            return this.$store.getters.doneGiveaways
        },
        testing(){
            return this.$store.getters.loadTesting
        }
    },
    watch:{
        giveaways(newVal, oldVal){
            console.log(newVal + 'test');
        },
        testing(newVal, oldval){
            console.log(newVal)
        },
        deep: true
    },
    created(){

    },
    methods:{

    },
    mounted(){
        this.$store.dispatch('getGiveAways');
        this.cards[2].result_val = this.$store.getters.doneGiveaways;
        if(this.$store.getters.doneGiveaways > 0){
            this.cards[2].background_color = 'orange';
            console.log('wew');
        }
        /*if(this.$store.state.Threshold.giveaways === null){
            this.$store.dispatch('getGiveAways');
        }else{}*/
    }
}

这是我的Threshold.js vuex

import Vue from 'vue';
import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);


const state = {
    giveaways: null,
    testing: ['wew']
}

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)
                //dispatch('getGiveAways');
            }
        })
        .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
    },
    loadTesting(state){
        return state.testing
    }
}

export default {
    state, mutations, actions, getters
}

Answer 1

尝试将匹配选项更改为：

watch:{
    giveaways(newVal, oldVal){
        console.log(newVal + 'test');
    },
    testing(newVal, oldval){
        console.log(newVal)
    },
    deep: true,
    $route: this.giveaways
},

或将其添加到路由器文件（需要另一个依赖项 - vuex-router-store）

import { sync } from 'vuex-router-sync'
import store from './vuex/store' // vuex store instance
import router from './router' // vue-router instance

Vue js：更改路径时未更新的计算属性

1 个答案: