Vuex получить обновленные данные

130
25 октября 2019, 20:00

Есть хранилище

export default new Vuex.Store({
    state: {
        profile: null,
    },
    getters: {
        getProfileGetter: state => state.profile,
    },
    mutations: {
        getProfileMutation(state, profile){
            state.profile = profile
        },
    },
    actions: {
        getProfileAction({ commit }){
            Vue.http.get("/api/auth/profile/")
                .then((response) => {
                    commit("getProfileMutation", response.body)
                })
                .catch((error => {
                    console.log(error.statusText)
                }))
        },
    }
})

В котором по умолчанию profile = null через getProfileAction идем в апи и берем там профиль

main.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import '@babel/polyfill'
import store from 'store/store'
import VueResource from 'vue-resource'
import App from 'pages/App.vue'
import 'vuetify/dist/vuetify.min.css'
import router from 'router/router'
import { abilitiesPlugin } from '@casl/vue'
Vue.use(abilitiesPlugin)
Vue.use(Vuetify)
Vue.use(VueResource)
Vue.use(require('vue-moment'))
new Vue({
    el: '#app',
    router,
    store,
    render: a => a(App),
})

Компонент APP

export default {
        methods: {
            ...mapActions(['getHelpDeskTasksAction', 'getProfileAction']),
        },
        computed: {
            ...mapState(['profile'])
        },
        created(){
            //Go to api and get profile
            this.$store.dispatch('getProfileAction').then((profile) => {
                console.log(profile) //null
            })
            //Go to api and get help desk task
            this.$store.dispatch('getHelpDeskTasksAction')
            //Update CASL
            console.log(this.profile) //null                
        }
    }

Почему я в console.log получаю null я понимаю что это потому что консоль выводится ранее чем получаем данные из апи но как получить данные c api в Vuex, а потому уже вывести их в консоль

В template я нормально получаю profile обновленный

Answer 1

this.$store.dispatch('getProfileAction').then((profile) => { console.log(profile) //null })

Вы почему-то решили что dispatch('getProvileAction') вернет вам Promise ? Он вам воощбе ничего не должен возвратить (хотя я тут могу ошибаться ибо вы вызываете then и не выдается ошибка). Данный action меняет состояние state.profile

Vue автоматом изменяет отрисовку при изменении реактивных свойств. Соответственно если у вас возвращается объект из api или массив, вы должны соответствующим образом поменять состояние profile.

Вот тут вы можете почитать более внимательно. Обратите на начальное состояние вашего profile

Если у вас не предполагается в дальнейшем обновлять данную модель - вы можете попросту воспользоваться при присвоении значения Vue.set(state.profile, newKey, newResult) при объекте либо state.profile.push(newResult) ежели получаете массив.

READ ALSO
Размер изображения

Размер изображения

Есть на сайте галерея фото где есть как горизотальные так и вертикальные фото

112
Показ случайных фраз по клику

Показ случайных фраз по клику

Код через заданное время показывает с низу статической фразы "НА САЙТЕ ТОЛЬКО" рандомно фразы 'ЯРКИЕ КАРТИНКИ', 'БЕСПЛАТНЫЕ КАРТИНКИ', 'КЛЕВЫЕ...

137
почему не работает alert

почему не работает alert

Не выводится сообщение после отправки формы

108
на элементы PhantomJS

на элементы PhantomJS

Написал на коленке код для работы с OCR Yandex Translate в среде PhantomJSДля перевода текста картинки с английского на русский

113