Vue js：更改路线时计算属性不更新答案

【问题标题】：Vue js: Computed property not updating when changing routeVue js：更改路线时计算属性不更新
【发布时间】：2018-05-22 05:41:36
【问题描述】：

我有一个仪表板页面，当我刷新页面时它工作正常，我检索了我的数据。但是，当我转到其他链接并返回我的仪表板页面（上一页）时，它不会更新我计算的 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
}

【问题讨论】：

如果您在路由器变回时尝试重新填充数据，那么我相信该函数应该在created()而不是computed: { ... }中。
@Johnson 它返回 null 我认为是因为创建的钩子在动作之前首先触发
@Johnson 加载时间太长，但是当我在 created() 上调用 this.giveaways 时它可以工作
你可以看下生命周期图看看先调用什么get，但是从created调用它是正确的。我不确定您的代码还发生了什么，至于为什么它很慢，我需要实时查看它并进行调试。 vuejs.org/v2/guide/instance.html

标签： javascript vue.js

【解决方案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

【讨论】：