Как вызвать метод из корневого экземпляра vue?

Question

[Алекс]

Добрый день, изучаю vue.
В документации написано

// Вызов методов корневого экземпляра
this.$root.baz()

Но как прописать в дочернем?

methods: {
this.$root.baz()

        }

но что то не так)) подскажите спасибо.

Answer 1

[Михаил]

methods: {
  method1() {
    this.$root.baz()
  }
}

Comments

[Алекс]

так пробовал- вобщем ето в корне
import axios from 'axios'

new Vue({
    data() {
        return {
            ParamsAffiliate: ''
        }
    },
    mounted() {
        this.getParams();
    },
    methods: {
        getParams(){
            const ParamsAffiliate = localStorage.getItem("ParamsAffiliate");
            if(ParamsAffiliate){
                this.ParamsAffiliate = JSON.parse(ParamsAffiliate);
                return;
            }

            axios.get('/information/userbar/')
                .then(response => {
                    this.ParamsAffiliate = response.data;
                    localStorage.setItem('ParamsAffiliate', JSON.stringify(response.data))
                })
        }

    }
});

ето дочерний
ID: {{ParamsAffiliate.id}}

export default {
        name: 'IdWeb',
        data() {
            return {
                ParamsAffiliate: ''
            }
        },
        mounted() {
            this.getParams()
        },
        methods: {

            getParams(){
                this.$root.getParams()
            }

        }
    }

и не выводится(( this.$root.getParams() не найдено

[Михаил]

Алекс, ну так $root это самый корневой элемент, тот который в src/index.js

[Михаил]

Алекс, вам походу на Vuex надо глянуть

[Алекс]

Михаил, подключил, использовал вот такое решение

import axios from 'axios';
export default new vuex.Store({
    state: {
        params: null,
    },
    mutations:{
        setParams(state, payload){
            state.params = payload;
        }
    },
    actions: {
        async getParams({commit, state}){
            let response = await axios.get('/information/userbar/');
            if (response.status === 200) {
                commit('setParams', response.data);
            }
        }
    }
});

component.vue

import { mapState } from 'vuex';
export default {
    name: 'IdWeb',
    computed: {
        ...mapState([
            'params'
        ])
    },
    mounted() {
        this.$store.dispatсh('getParams');
    },
}

<template>
    <li class="state_account_id" v-if="params">
        ID: {{params.id}}
    </li>
</template>

база подключается, но в html пусто, ошибок нет, не подскажете что не так может быть?

[Михаил]

Алекс, в store значение ставится?

[Алекс]

Михаил, там объект подрубается, и из него потом достается id, если я так понял)

[Михаил]

Алекс, в сам store объект ставится? Проблема в отображении?

[Miki06]

Алекс,

async mounted() {
  await this.$store.dispatсh('getParams');
    },

Попробуйте

[Алекс]

Miki06, заработало) Спасибо вам большое!

[Miki06]

Алекс, Не за что, проблема была в синхронности, то есть компонент уже смонтирован но данные ещё не были вытащены из бд

[Алекс]

Miki06, я конечно наглею)) я могу скинуть на пиваз вам), а помогите еще поправить конфигу vuex чтоб данные заносиились в локалсторж

как то ето соединить

const ParamsAffiliate = localStorage.getItem("ParamsAffiliate");
    if(ParamsAffiliate){
        this.ParamsAffiliate = JSON.parse(ParamsAffiliate);
        return;
    }

    axios.get('/information/userbar/account')
        .then(response => {
            this.ParamsAffiliate = response.data;
            localStorage.setItem('ParamsAffiliate', JSON.stringify(response.data))
        })

[Miki06]

Алекс,

//Ввод
localStorage.ParamsAffiliate=JSON.stringify(response.data)
//Вывод
ParamsAffiliate=localStorage.ParamsAffiliate

С локальным хранилищем не работал но попробуйте
PS. На пиво не надо)

[Miki06]

Miki06, а нет это не сработает со сложными типами

[Miki06]

Алекс, А в чем проблема? Не данные не вносятся или не выводятся?

[Алекс]

Miki06, да говорят много одинаковых запросов) хорошо бы хранить в локалсторж или куках запросы.Но ето хрен сним пока.Спасибо вам огромное

Answer 2

[Miki06]

Алекс, Первый раз слышу про запросы в локалсторадж, любой юзер сможет посмотреть и изменить их