Postingan lainnya
cara state vuex dengan axios gimana ya ?
export default {
SingleView:false,
tweets:[
{ data :
axios.get(URL)
.then(function (response)
{
response;
console.log(response)
})
.catch(function (error) {
console.log(error)
})
},
]
}
klo di devtools hasil nya tweets : data -> promise
6 Jawaban:
saya ngga tahu backend agan, tapi mungkin ada di data response.data jangan lupa nilainya dioper ke variabel yang dimau coba cek artikel medium ini, lihat dia declare variable kosong dulu di data, nanti dibawahanya baru call axiosnya bisa lebih rapi https://medium.com/@bradfmd/vue-vuex-getting-started-f78c03d9f65
btw kalo pasang kode di dalam "tag kode" ya gan biar lebih rapi, bisa coba diedit pertanyyannya
Itu diletakan dmana gan codenya? Agan kalo mau storing data yg didapet dari proses async di vuex. Pertama bikin dulu statenya terus bikin mutations statenya. Itu proses async yg return valuenya promise diletakan di actionsnya vuex gan, emang yg di return di actions itu promise gan. Nanti dari aplikasi agan, agan dispatch actions nya. Nah si actions yg agan buat tadi commit si mutations yg agan buat, baru statenya keupdate
saya blom pernah pakai axios tapi kalau pake vue-resource kira2 begini implementasinya;
file index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import Post from './Post';
const store = new Vuex.Store({
modules: {
Post,
},
});
export default store;
file Post.js
import Vue from 'vue';
export default {
namespaced: true,
state: {
rs: [],
},
mutations: {
setDataSource(state, dataSource) {
state.rs = dataSource;
},
},
getters: {},
actions: {
readData({ commit }) {
return new Promise((resolve, reject) => {
Vue.http.post('crud/post/read', {
computed: true
}).then(response => {
var result = response.body;
if (result.state == 'success') {
commit('setDataSource', result.data);
resolve(result);
} else
reject(result);
});
});
},
},
}
nanti dari aplikasi tinggal dipanggil begini
this.$store.dispatch('Post/readData').then(()=> { ... }).catch(() => { ... });
tu perintah dispatch diatas manggil actionnya, sedangkan action readData yg dipanggil melakukan commit pada mutasi setDataSource, akibatnya state rs terupdate. nanti tampilan yg dibinding sama state rs datanya ikut terupdate karena reactive
Jawaban Terpilih
sudah berhasil gan state.js
export default {
singleView:false,
tweets:[]
}
actions.js
import axios from 'axios'
import * as mutation from './mutations-type';
export default {
async getTweetData(context) {
try {
const tweets = await axios.get('http://127.0.0.1:4200/api')
context.commit(mutation.GET_DATA,tweets.data)
} catch (e) {
context.commit(mutation.API_ERROR,e)
}
}
}
mutations.js
import * as mutation from './mutations-type';
export default {
[mutation.GET_DATA](state,payload){
state.singleView =false
state.tweets= payload
},
[mutation.API_ERROR](state,payload){
state.singleView =false
state.tweets=payload
}
}
getters.js
export default {
tweets : state => {
return state.tweets
},
singleView: state => {
return state.singleView
//console.log(state)
},
}
component
<a href="#" @click.prevent="getTweetData()">Tampilkan all tweets</a>
<script>
import { mapGetters,mapActions } from 'vuex'
import tweet from '@/components/tweets'
export default {
name: "main",
computed:{
...mapGetters([
'tweets',
'singleView'
])
},
components: {
tweet
},
methods: {
...mapActions([
'getTweetData'
])
},
mounted(){
this.getTweetData()
}
}
</script>
async dan await itu untuk apa ya mas guna nya
