确保您已经正确引入了axios和vuex,并且已经在Vue实例中注册了vuex。然后,您可以按照以下步骤使用axios和vuex来删除数组中错误的索引。
deleteItem的vuex action,用于处理删除数组中的项目逻辑。在该action中,使用axios发送一个删除请求,并在删除成功后更新vuex store中的数组。// store.js
import axios from 'axios';
const store = {
state: {
items: []
},
mutations: {
setItems(state, items) {
state.items = items;
}
},
actions: {
async deleteItem({ commit, state }, index) {
try {
// 发送删除请求
await axios.delete(`/api/items/${state.items[index].id}`);
// 更新vuex store中的数组
const updatedItems = [...state.items];
updatedItems.splice(index, 1);
commit('setItems', updatedItems);
} catch (error) {
console.error(error);
}
}
}
};
export default store;
mapActions辅助函数将deleteItem action映射到组件的methods中。然后,您可以在模板中调用该方法来触发删除逻辑。// MyComponent.vue
-
{{ item.name }}
通过以上步骤,您可以使用axios和vuex来删除数组中的错误索引。当点击"删除"按钮时,会触发deleteItem action,该action会发送删除请求并更新vuex store中的数组。