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

Posted 2023-02-23

【中文标题】无法将存储数据访问到 vuex 中的组件中

【英文标题】：Cannot access store data into a component in 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: '[e-mail]',
                        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 ？

【参考方案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: '[e-mail]',
                    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)
            )