от одной оси к разным компонентам, VueJS - PullRequest
Новая
       20

от одной оси к разным компонентам, VueJS

2 голосов
/ 28 марта 2019

Хорошо, у меня есть два разных компонента, и каждый из них получает ответ Axios.Но я не хочу получать данные в каждом компоненте отдельно.Это не правильно, и это приводит к тому, что компоненты работают отдельно ...

Обновлено 3

Я внес некоторые изменения в код, но все еще возникают некоторые проблемы.Я делаю вызов axios с Vuex в Store.js и импортирую его в свой компонент.это как ниже.

Это мой компонент store.js; 

import Vue from "vue";
import Vuex from "vuex";

var actions = _buildActions();
var modules = {};
var mutations = _buildMutations();

const state = {
    storedData: []
};

Vue.use(Vuex);

const getters = {
    storedData: function(state) {
        return state.storedData;
    }
};

function _buildActions() {
    return {
        fetchData({ commit }) {
            axios
                .get("/ajax")
                .then(response => {
                    commit("SET_DATA", response.data);
                })
                .catch(error => {
                    commit("SET_ERROR", error);
                });
        }
    };
}

function _buildMutations() {
    return {
        SET_DATA(state, payload) {
            console.log("payload", payload);
            const postData = payload.filter(post => post.userId == 1);
            state.storedData = postData;
        }
    };
}

export default new Vuex.Store({
    actions: actions,
    modules: modules,
    mutations: mutations,
    state: state,
    getters
});

Теперь импортируем его в Average компонент. 

import store from './Store.js';

export default {
    name:'average',
    data(){
        return{
            avg:"",
            storedData: [],
        }
    },
    mounted () {
        console.log(this.$store)
        this.$store.dispatch('fetchDatas')
        this.storedData = this.$store.dispatch('fetchData')
    },
    methods: {
        avgArray: function (region) {
             const sum = arr => arr.reduce((a,c) => (a += c),0);
             const avg = arr => sum(arr) / arr.length;

             return avg(region);
        },
    },
    computed: {
        mapGetters(["storedData"])

        groupedPricesByRegion () {
        	return this.storedData.reduce((acc, obj) => {
                var key = obj.region;
                if (!acc[key]) {
                    acc[key] = [];
                }
                acc[key].push(obj.m2_price);
                return acc;
            }, {});
        },

        averagesByRegion () {
        	let arr = [];
            Object.entries(this.groupedPricesByRegion)
                .forEach(([key, value]) => {
                    arr.push({ [key]: Math.round(this.avgArray(value)) });
            });
            return arr;
        },
    }
}

Я вижу данные, хранящиеся в консоли.Но есть и ошибки.Я не могу правильно передать данные в myComponent

https://i.stack.imgur.com/J6mlV.png

Ответы [ 2 ]

2 голосов
/ 28 марта 2019

если вы не хотите использовать vuex для распространения данных, возможно, вы можете попробовать eventBus, когда вы получаете данные из axios respose @emit событие и в другой компонент @on это событие

0 голосов
/ 30 марта 2019

Проблема заключается в том, что для устранения получаемой ошибки ниже приведены шаги.

Импортируйте файл хранилища в файл, в котором инициализирован экземпляр Vue. 

// Assuming your store file is at the same level
import store from './store';

Внутри вашего объекта Add store внутри вашего экземпляра Vue 

function initApp(appNode) {
    new Vue({
        el: appNode,
        router: Router,
        store // ES6 sytax
    });
}

Теперь вы можете получить доступ к своему магазину из любого компонента.

ОБНОВЛЕНИЕ: для второй ошибки

Вместо того, чтобы изменять данные внутри вашего компонента, измените его внутри mutation в хранилище, потому что вы не хотите записывать тот же логин в других компонентах, где используется тот же метод.

Следовательно, 

computed: {
    ...mapGetters(["storedData"]),
    anotherFunction() {
       // Function implementation.
    }
}

Внутри вашей мутации задайте данные. 

SET_DATA(state, payload) {
    console.log("payload", payload);
    state.storedData = payload;
}

Внутри геттеров вы можете выполнять то, что вы выполняли внутри ваших вычисленных свойств.

storedData: function(state) {
    const postData = state.storedData.filter(post => post.userId == 1);
    return postData;
}

Официальный Vuex документы

Вот рабочие codesandbox

Надеюсь, это поможет!

...