Question

我已被分配到一个使用Vuejs和Vuex进行状态管理的项目，该商店采用store/store-types.js样式的模块化，其中包括const中每个模块的所有getter / action / variants，以及每个modules/someModule，其中包含状态变量，获取器，变异和动作。

我在操作中执行api调用，然后将操作分派到嵌套在带有子组件的views/pages/specificPage中的索引组件中，然后在子组件或索引中调用getter并将它们作为props(index/child1/child2/child3)

我需要显示来自2个api调用，调度，2个动作和2个getter的数据，并将getters数据设置为一些我作为prop传递的变量。我对数据进行了一些过滤，在操作和组件中都尝试过。

我看到了在控制台上设置的突变，我的状态和获取器都在vue devtools中显示了数据，但是以某种方式我设置数据的变量以undefined的形式返回，所以我无法执行任何过滤，也无法在模板中显示。

ps：来自api调用的数据是一个嵌套对象数组，其深度为2级

到目前为止，我已经尝试使用v-if解决方法来检查数据变量的长度，或者是否为undefined，尝试了$forceUpdate并将密钥传递给组件以强制其更新但似乎都不起作用。

Store-types.js

// STATE & GETTERS
export const VEHICLES="VEHICLES";
export const VEHICLE="VEHICLE";
export const AUTH_VEHICLES='AUTH_VEHICLES'
export const TRACKED_VEHICLES='TRACKED_VEHICLES'
// MUTATIONS
export const SET_VEHICLES = 'SET_VEHICLES';
export const SET_VEHICLE = 'SET_VEHICLE';
export const SET_AUTH_VEHICLES='SET_AUTH_VEHICLES';
export const SET_TRACKED_VEHICLES='SET_TRACKED_VEHICLES';

// ACTIONS
export const GET_VEHICLES = 'GET_VEHICLES';
export const GET_VEHICLE = 'GET_VEHICLE';
export const GET_AUTH_VEHICLES = 'GET_AUTH_VEHICLES';
export const GET_TRACKED_VEHICLES = 'GET_TRACKED_VEHICLES';

store / index.js

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersistence from 'vuex-persist'
import createLogger from 'vuex/dist/logger'
import {modules/*, nameModules*/} from './modules'
import {state, getters, mutations, actions} from './store'
Vue.use(Vuex);
const vuexLocal = new VuexPersistence({
    storage: window.localStorage,
    key: process.env.VUE_APP_APP_NAME,
    modules: ['locale', 'sidebar', 'auth', 'last_trackings']
});
let store = new Vuex.Store({
    state: state,
    getters: getters,
    mutations: mutations,
    actions: actions,
    modules: modules,
    plugins: [vuexLocal.plugin, createLogger()],
    strict: process.env.VUE_APP_NODE_ENV !== 'production',
});
export default store

Vehicules.js

import VehicleService from '@services/vehicle.service'
import LastTrackingService from '@services/last_tracking.service'
import Vue from 'vue'
import * as S from "../store.types"

const state = {
    [S.AUTH_VEHICLES]: [],
    [S.TRACKED_VEHICLES]: [],
};

const getters = {
    [S.AUTH_VEHICLES](state) {
        return state[S.AUTH_VEHICLES];
    },
    [S.TRACKED_VEHICLES](state) {
        return state[S.TRACKED_VEHICLES];
    },
};

const mutations = {
    [S.SET_AUTH_VEHICLES](state, payload) {
        state[S.AUTH_VEHICLES] = payload;
    },
    [S.SET_TRACKED_VEHICLES](state, payload) {
        state[S.TRACKED_VEHICLES]= Object.assign({}, state[S.TRACKED_VEHICLES], payload);
    }
};
const actions = {
    [S.GET_AUTH_VEHICLES]({commit}, {id}) {
        return VehicleService.getAllByUserId(id).then(response=>{
            commit(S.SET_AUTH_VEHICLES, response)
        })
    },
   [S.GET_TRACKED_VEHICLES]({commit}, {id}) {
       let tracking=[];
       let vehicules=[];
       let trackedVehicules = [{}];
       let today = new Date();
       return LastTrackingService.getUserLastTracking().then(({data})=>{
           tracking= Object.assign(tracking, data);
           VehicleService.getAllByUserId(id).then(response=>{
               vehicules = Object.assign(vehicules, response.data);
           });
           for (let t of tracking) {
               if (!!t.acc && !!t.km) {
                   if (t.speed > 5) {
                       trackedVehicules.push({veh_id: t.vehicule_id, etat: "moving"});
                   } else {
                       trackedVehicules.push({veh_id: t.vehicule_id, etat: "onBreak"});
                   }
               } else {
                   if (!!t.acc && t.speed <= 5) {
                       trackedVehicules.push({veh_id: t.vehicule_id, etat: "onBreak"});
                   } else {
                       trackedVehicules.push({veh_id: t.vehicule_id, etat: "stopped"});
                   }
               }
               let trackingDate = new Date((t.tracking_time + "").slice(0, 10));
               if (Math.ceil(Math.abs(today.getTime() - trackingDate.getTime()) / (1000 * 3600 * 24)) > 2) {
                   trackedVehicules.push({veh_id: t.vehicule_id, etat: "inAnomalie"});
               }
           }
//           resolve(trackedVehicules);
           commit(S.SET_TRACKED_VEHICLES, trackedVehicules);
       });
   }

}

export default {
    state,
    mutations,
    actions,
    getters
}

在vuex存储数据加载后组件未重新呈现

0 个答案: