Javascript 使用Vuex进行API调用的正确方法是什么?
我有一个带有Vuex的Vue网页包应用程序(我对两者都是新手,来自余烬世界)。我目前已将其设置为将vue资源与以下两个文件一起使用:Javascript 使用Vuex进行API调用的正确方法是什么?,javascript,vue.js,vuex,vue-resource,Javascript,Vue.js,Vuex,Vue Resource,我有一个带有Vuex的Vue网页包应用程序(我对两者都是新手,来自余烬世界)。我目前已将其设置为将vue资源与以下两个文件一起使用: import Vue from 'vue'; import Vuex from 'vuex'; import Api from './api'; Vue.use(Vuex); // eslint-disable-next-line export const store = new Vuex.Store({ state: { apiBaseUrl:
import Vue from 'vue';
import Vuex from 'vuex';
import Api from './api';
Vue.use(Vuex);
// eslint-disable-next-line
export const store = new Vuex.Store({
state: {
apiBaseUrl: 'https://apis.myapp.com/v1',
authenticatedUser: null,
},
mutations: {
/**
* Updates a specific property in the store
* @param {object} state The store's state
* @param {object} data An object containing the property and value
*/
updateProperty: (state, data) => {
state[data.property] = data.value;
},
},
actions: {
usersCreate: (context, data) => {
Api.post('/users', data)
.then(response => context.commit('updateProperty', { property: 'authenticatedUser', value: response.body }))
// eslint-disable-next-line
.catch(error => console.error(error));
},
},
});
/src/store/api.js
import Vue from 'vue';
import { store } from './store';
export default {
get(url, request) {
return Vue.http
.get(store.state.apiBaseUrl + url, request)
.then(response => Promise.resolve(response.body))
.catch(error => Promise.reject(error));
},
post(url, request) {
return Vue.http
.post(store.state.apiBaseUrl + url, request)
.then(response => Promise.resolve(response))
.catch(error => Promise.reject(error));
},
// Other HTTP methods removed for simplicity
};
然后我将上面的api.js文件导入我的/src/store/store.js文件,如下所示:
import Vue from 'vue';
import Vuex from 'vuex';
import Api from './api';
Vue.use(Vuex);
// eslint-disable-next-line
export const store = new Vuex.Store({
state: {
apiBaseUrl: 'https://apis.myapp.com/v1',
authenticatedUser: null,
},
mutations: {
/**
* Updates a specific property in the store
* @param {object} state The store's state
* @param {object} data An object containing the property and value
*/
updateProperty: (state, data) => {
state[data.property] = data.value;
},
},
actions: {
usersCreate: (context, data) => {
Api.post('/users', data)
.then(response => context.commit('updateProperty', { property: 'authenticatedUser', value: response.body }))
// eslint-disable-next-line
.catch(error => console.error(error));
},
},
});
当我需要创建一个新用户时,我只需this.$store.dispatch('usersCreate',{//my data})代码>在我的组件中。这很好,但我有几个问题:
我无法捕获组件中的问题以显示toast消息等。
我甚至无法检查AJAX调用是否成功
如果我有很多API,我将不得不在store.js文件中编写很多操作,这并不理想。我当然可以创建一个接受HTTP方法、URL等的标准操作,然后调用它,但我不确定这是否是一个好的实践
正确的方法是什么?如何在我分派操作的组件中检查AJAX失败/成功状态?使用Vuex时进行API调用的最佳做法是什么?您的操作应该返回一个承诺。您当前的代码只调用Api.post
,而不返回它,因此Vuex已退出循环。有关详细信息,请参见Vuex文档中的示例
当您返回承诺时,操作调用方可以遵循then()
链:
this.$store.dispatch('usersCreate').then(() => {
// API success
}).catch(() => {
// API fail
});
至于组织您的操作,您不必将它们全部放在store.js
文件中。Vuex支持模块/名称空间 我建议你不要这样做,除非你的应用程序失控了。