2017-03-23 3 views
0

I'an nicht mit getters.js separat Datei, statt Getter geschrieben in JS-> aktiv-> Store-> Module-> user.js DateiModul Getter nicht in vue Komponente Aktualisierung

Das ist mein Benutzer Js

const state = { 
    count : '', 
    list:[] 
}; 

const mutations = { 
    COUNT: (state, data) => { 
     state.count = data 
    }, 
    LIST : (state, data) => { 
     state.list = data 
    } 
}; 

const getters = { 
    userCount:(state) => state.list.length 
}; 

const actions = { 
    getList: ({commit,state}) => { 
     axios.get('/api/user/list') 
     .then((response) => { 
      commit('LIST', response.data); 
     }) 
    } 
}; 

export default { 
    namespaced: true, 
    state, 
    getters, 
    actions, 
    mutations 
} 

das ist mein Benutzer vue bauteil user.vue

<template> 
    <div class="col-lg-3 col-xs-6"> 
     <div class="small-box bg-yellow"> 
      <div class="inner"> 
        <h3>{{ usercount }}</h3> 
        <p>User Registrations</p> 
      </div> 
      <div class="icon"> 
       <i class="ion ion-person-add"></i> 
      </div> 
      <a href="#" class="small-box-footer">View <i class="fa fa-arrow-circle-right"></i></a> 
     </div> 
    </div> 
</template> 
<script> 
export default{ 
    computed: { 
     usercount() { 
      return this.$store.getters['user/userCount']; 
     } 
    }, 
    mounted(){ 
     this.$store.dispatch('user/getList'); 
    } 
} 
</script> 

in user.js, alert (state.list.length) die richtige Anzahl in der Warnung b gibt Ochse.

Aber in user.vue, alert (. Diese $ store.getters [ 'user/Usercount']) gibt 'undefined'

Antwort

0

In der Api-Controller, I'am paginieren() anstelle von get() verwenden. vue Entwickler-Tools hat mir geholfen, das herauszufinden ...

getList: ({commit,state}) => { 
    axios.get('/api/user/list') 
    .then((response) => { 
     commit('LIST', response.data); 
    }) 
} 

veränderte response.data wieder sponse.data.data

0

unnötige : von diesem entfernen:

const getters = { 
    userCount (state) => state.list.length 
}; 
+0

const getters = { userCount: (Zustand) => state.list.length }; Das ist korrekt. Früher zeigte es undefined. Aber jetzt funktioniert alles gut ... –