如何在组件中显示vuex存储信息

时间:2019-06-03 14:05:37

标签: vue.js vuex

我正在使用Vuejs进行电子商务项目,并且已经在Vuex存储中将一些数据检索到数组中,因此我想在组件中显示数组数据。我实际上在线上碰到了一个教程,可以在计算部分中使用“ mapState(['myArray'])”显示数组,但我想使用类似“返回this。$ store.state.myArray”的方法。除了使用“ mapstate”之外,还有其他方法可以使我能够在getters {}和任何组件中对其进行访问和操作。这是我所做的:

//component

<script>
import { mapState } from 'vuex'

export default {
  mounted(){
    console.log(this.$store.state.coins);
    this.$store.dispatch('loadCoins');
  },
  computed: mapState(['coins'])
}
</script>

//store.js
export default new Vuex.Store({
  state:{
    coins: []
  },
  actions:{
    loadCoins ({ commit }){      
       axios.get('http://localhost:80/api/coins.php')
         .then(response => response.data)
           .then(coins => {
            commit('SET_COINS', coins)
           });
    },
   },
   mutations:{
        SET_COINS (state, coins) {
          state.coins = coins
        }
   }
});

0 个答案:

没有答案