Есть хранилище
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 обновленный
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) ежели получаете массив.
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Есть на сайте галерея фото где есть как горизотальные так и вертикальные фото
Код через заданное время показывает с низу статической фразы "НА САЙТЕ ТОЛЬКО" рандомно фразы 'ЯРКИЕ КАРТИНКИ', 'БЕСПЛАТНЫЕ КАРТИНКИ', 'КЛЕВЫЕ...
Написал на коленке код для работы с OCR Yandex Translate в среде PhantomJSДля перевода текста картинки с английского на русский