npm install axios
pages/studypromise/index.vue
<template>
<div class="promise">
<button @click="show">버튼</button>
<p>출력값 : {{ name }}</p>
</div>
</template>
<script>
export default {
data()
{
return{
name : ""
}
},
methods : {
show()
{
let vm = this;
this.$store.dispatch( "studypromise/setData" )
.then( function(){
let getData = vm.$store.getters[ "studypromise/getData" ];
vm.name = getData.name;
}
);
}
}
}
</script>
<style lang="scss" scoped>
.promise{ width: 500px; text-align: center; margin: 0 auto; padding: 100px 0;
button{ width: 500px; font-size: 100px; padding: 10px 0; margin-bottom: 50px; }
p{ font-size: 50px; }
}
</style>
store/studypromise.js
import axios from "axios";
export default{
state(){
return{
data : {}
}
},
mutations : {
setData( state, $data ){
state.data = $data;
}
},
actions : {
setData( { commit } ){
return new Promise( function( resolve, reject ){
axios.get( 'https://api.myjson.com/bins/1d34xs' ).then(( res ) => {
commit( "setData", res.data );
resolve();
});
});
}
},
getters : {
getData : function( state ){
return state.data;
}
}
}
'frontend > vue' 카테고리의 다른 글
| Vue( Nuxt.js ) mapMutations( store module ) (0) | 2019.01.22 |
|---|---|
| Vue( Nuxt.js ) mapGetters( store module ) (0) | 2019.01.22 |
| Vue( Nuxt.js ) Filter (0) | 2019.01.21 |
| Vue( Nuxt.js ) Vuex( Store ) Module (0) | 2019.01.21 |
| Vue( Nuxt.js ) Vuex( Store ) (0) | 2019.01.21 |