-
-
Save lmiller1990/a4e9208a01707ff7c0e8447250fc6f13 to your computer and use it in GitHub Desktop.
<template> | |
<div id="app"> | |
<p> | |
Pending: {{ $store.state.getInfoPending }} | |
</p> | |
<p> | |
{{ $store.state.getInfoData }} | |
</p> | |
</div> | |
</template> | |
<script> | |
export default { | |
created () { | |
this.$store.dispatch('getAsync') | |
} | |
} | |
</script> |
import axios from 'axios' | |
const doAsync = (store, { url, mutationTypes, stateKey }) => { | |
store.commit(mutationTypes.PENDING) | |
setTimeout(() => { | |
axios(url, {}) | |
.then(response => { | |
store.commit(mutationTypes.SUCCESS, response.data) | |
}) | |
.catch(error => { | |
store.commit(mutationTypes.FAILURE) | |
}) | |
}, 1500) | |
} | |
export default doAsync |
/* To run this gist, make an app using the vue-cli and webpack-simple template. | |
* vue init webpack-simple some-app | |
* also you will need to `yarn add axios vuex lodash --save` | |
*/ | |
import Vue from 'vue' | |
import App from './App.vue' | |
import store from './store' | |
new Vue({ | |
el: '#app', | |
store, | |
render: h => h(App) | |
}) |
import _ from 'lodash' | |
const createAsyncMutation = (type) => ({ | |
SUCCESS: `${type}_SUCCESS`, | |
FAILURE: `${type}_FAILURE`, | |
PENDING: `${type}_PENDING`, | |
loadingKey: _.camelCase(`${type}_PENDING`), | |
stateKey: _.camelCase(`${type}_DATA`) | |
}) | |
export const GET_INFO_ASYNC = createAsyncMutation('GET_INFO') |
import Vue from 'vue' | |
import Vuex from 'vuex' | |
import doAsync from './async-util' | |
import * as types from './mutation-types' | |
Vue.use(Vuex) | |
const mutationTypes = { | |
SUCCESS: 'GET_INFO_SUCCESS', | |
FAILURE: 'GET_INFO_FAILURE', | |
PENDING: 'GET_INFO_PENDING' | |
} | |
const state = { | |
info: {}, | |
} | |
const mutations = { | |
[types.GET_INFO_ASYNC.SUCCESS] (state, info) { | |
state[types.GET_INFO_ASYNC.loadingKey] = false | |
Vue.set(state, [types.GET_INFO_ASYNC.stateKey], info) | |
}, | |
[types.GET_INFO_ASYNC.PENDING] (state) { | |
console.log(types.GET_INFO_ASYNC.loadingKey) | |
Vue.set(state, types.GET_INFO_ASYNC.loadingKey, true) | |
} | |
} | |
const actions = { | |
getAsync(store) { | |
doAsync(store, { | |
url: 'https://jsonplaceholder.typicode.com/posts/1', | |
mutationTypes: types.GET_INFO_ASYNC | |
}) | |
} | |
} | |
export default new Vuex.Store({ | |
state, | |
mutations, | |
actions | |
}) |
mutationTypes is needed because this doesn't seem to actually work with import
const mutations = {
[types.GET_INFO_ASYNC.SUCCESS] (state, info) {
but this does
const mutations = {
[mutationTypes.SUCCESS] (state, info) {
@tomnielsen importing mutation-types.js
worked for me.
You probably didn't place mutation-types.js
file in the same directory as store.js
(store.js
looks in his directory for mutation-types
file, take a look at store.js
import deceleration).
As @mahboob-awan said, mutationTypes
is not necessarily needed, you might just use imported types
.
Why do we pass the store to the ajax-utils functions like doAsync()? Why not import it? Also, when you would POST some data, e.g. registering a user, would you pass that data via the store to an ajax-utility function or would you pass it directly? I mean, couldn't we somehow save the reference to the store object in a "global" register, like a dependency register, and take it form there?
@padomu this was just example - importing it would be fine. As for your second comment - both ways are fine. This is just showing the concept for three different states.
Following code seems extra in store.js:(and may confuse fellow developers)