无法将存储数据访问到 vuex 中的组件中答案

【问题标题】：Cannot access store data into a component in vuex无法将存储数据访问到 vuex 中的组件中
【发布时间】：2019-11-08 01:27:09
【问题描述】：

我有一个商店，用于存储对象数组。我正在尝试将该数组访问到组件中。但我无法访问它。没有错误弹出到控制台。但是，当我尝试 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 的样子

我如何使这段代码工作。如何访问SubAppsRenderer.vue 组件中的数据？

【问题讨论】：

你在哪里调用getAppsData ？

标签： javascript vue.js components vuex

【解决方案1】：

appsData: [],应该在vuex中的状态。

const state = {
    appsData: []
};

然后在您尝试记录它的操作中，您将通过上下文访问它

console.log(context.state.appsData);

【讨论】：

我只是使用了 store.js 的原始代码。在语法上，store.js 下的一切都是正确的。我的 store.js 文件很大，所以在该部分发布了必要的代码

【解决方案2】：

不要返回承诺。 Axios 调用是基于 Promise 的。返回 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)
            })
    }

【讨论】：