Невозможно получить доступ к данным магазина в компоненте в vuex - PullRequest
Новая
       24

Невозможно получить доступ к данным магазина в компоненте в vuex

0 голосов
/ 26 июня 2019

У меня есть магазин, который используется для хранения массива объектов. Я пытаюсь получить доступ к этому массиву в компонент. Но я не могу получить к нему доступ. В консоли не выскакивает ошибка. Но когда я пытаюсь использовать console.log (), он показывает пустой массив.

Я попытался распечатать данные в store.js сам. Показывает, что данные хранятся в магазине.

Вот код:

store.js

 appsData: [],
 mutations: {
        storeAppsData(state, data) {
            state.appsData = data;
        }
 },
 getters: {
        appsData: state => {
            return state.appsData
        }
 },
 actions: {

        getAppsData(context) {
            return new Promise((resolve, reject) => {
                axios.get('http://localhost/phoenix/index.php/v1/menu', {
                    headers: {
                        'Content-Type': 'application/json'               
                    },
                    auth: {
                        username: 'data.simulation@makeadiff.in',
                        password: 'pass'
                    }    
                }).
                then(response => {
                    context.commit('storeAppsData', response.data.data.menu)
                    console.log(this.state.appsData)
                    resolve(response);  // Let the calling function know that http is done. You may send some data back
                }).catch(error => {
                    reject(error);
                })        
            })
        }
}

SubAppsRenderer.vue:

<template lang="html">  
    <CardRenderer :render-data="valArr" />
</template>

<script lang="js">
import CardRenderer from './CardRenderer'

    export default  {
        name: 'SubAppsRenderer',
        components: {
            CardRenderer
        },
        props: [],

        data() {
            return {
                valArr: []
            }
        },
            let key = this.findLastPath()
            mounted() {

                console.log(this.$store.getters.appsData)
                let value = this.$store.getters.appsData.filter((elem) => {
                    if(elem.name == key) return elem  
                })

                if (value && value.length > 0)
                    this.valArr = value[0].apps                


        },
        methods: {
            findLastPath() {
                let url  = window.location.pathname.split("/").slice(-1)[0];
                url = url.replace('%20', " ")
                return url
            }       
        },
        computed: {

        }
    }
</script>

<style scoped >

</style>

CardGrouper.vue

<template lang="html">
  <div class="full" >
    <div>   
      <CardRenderer :renderData=this.apps />
    </div>    
  </div>
</template>

<script>
import CardRenderer from "./CardRenderer.vue"

  export default  {
    name: 'CardGrouper',
    components: {
      CardRenderer
    },
    props: [],
    mounted() {
      this.$store.dispatch('getAppsData').
        then((response ) => {
          this.apps = response.data.data.menu          
        }).
        catch(() => {

      }) 

    },
    data() {
      return {
        apps: []
      }
    },
    methods: {

    },
    computed: {

    }
}
</script>

<style scoped >

  .full{
    width: 100vw;
    height: 90vh;        
  }

</style>

Вот так выглядит console.log enter image description here

Как мне заставить этот код работать. Как получить доступ к данным в компоненте SubAppsRenderer.vue?

Ответы [ 2 ]

0 голосов
/ 28 июня 2019

Не вернуть обещание.Вызовы Axios основаны на обещаниях.Верните axios.get, затем верните свой ответ, затем цепочку оттуда, чтобы получить ваш ответ. 

getAppsData(context) {
        return axios.get('http://localhost/phoenix/index.php/v1/menu', {
                headers: {
                    'Content-Type': 'application/json'               
                },
                auth: {
                    username: 'data.simulation@makeadiff.in',
                    password: 'pass'
                }    
            }).
            then(response => {
                context.commit('storeAppsData', response.data.data.menu)
                console.log(this.state.appsData)
                return response  // Let the calling function know that http is done. You may send some data back
            }).catch(error => {
                console.log('err',error)
            })
    }
0 голосов
/ 26 июня 2019

appsData: [], Должен быть в состоянии в vuex. 

const state = {
    appsData: []
};

и затем в вашем действии, когда вы пытаетесь его зарегистрировать, вы получаете к нему доступ через контекст 

console.log(context.state.appsData);
...