chore: update dependencies and refactor Vuex store for country data
- Updated dependencies in package.json to latest versions for axios, bulma, core-js, vue, vuex, and testing libraries. - Refactored actions.js to use the new REST Countries API v3 with a fallback to v2, improving error handling and data mapping. - Simplified Vuex store structure by defining state and mutations directly in index.js, removing unnecessary imports. - Updated mutations.js to use a consistent naming convention for setting countries. - Cleaned up state.js to maintain a clear structure for Vuex state management.
This commit is contained in:
Generated
+24371
-16234
File diff suppressed because it is too large
Load Diff
+13
-15
@@ -36,31 +36,29 @@
|
||||
"deploy": "sh deploy.sh"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.21.1",
|
||||
"bulma": "^0.9.1",
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^2.6.11",
|
||||
"vuex": "^3.6.0",
|
||||
"vue-template-compiler": "^2.6.12"
|
||||
"axios": "^1.12.2",
|
||||
"bulma": "^0.9.4",
|
||||
"core-js": "^3.46.0",
|
||||
"vue": "^2.7.16",
|
||||
"vuex": "^3.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-plugin-babel": "^3.12.1",
|
||||
"@vue/cli-plugin-eslint": "^3.12.1",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@vue/test-utils": "^1.1.2",
|
||||
"@vue/test-utils": "^2.4.6",
|
||||
"babel-core": "^7.0.0-bridge.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-jest": "^26.6.3",
|
||||
"eslint": "^6.7.2",
|
||||
"babel-jest": "^30.2.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-jest": "^24.1.3",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"jest": "^26.6",
|
||||
"eslint-plugin-vue": "^7.20.0",
|
||||
"jest": "^30.2.0",
|
||||
"jest-serializer-vue": "^2.0.2",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"vue-jest": "^3.0.7",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
"vue-template-compiler": "^2.7.16"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
|
||||
+43
-8
@@ -1,16 +1,51 @@
|
||||
// ...existing code...
|
||||
import axios from 'axios';
|
||||
|
||||
const actions = {
|
||||
async getCountries({ commit }) {
|
||||
const url = 'https://restcountries.com/v2/all';
|
||||
await axios
|
||||
.get(url)
|
||||
.then((response) => {
|
||||
commit('SET_COUNTRIES', response.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
const fields = 'name,cca3,population,region,capital,flags';
|
||||
const urlV3 = 'https://restcountries.com/v3.1/all?fields=' + fields;
|
||||
const urlV2 = 'https://restcountries.com/v2/all';
|
||||
|
||||
const mapV3 = function (data) {
|
||||
return data.map(function (c) {
|
||||
return {
|
||||
name: (c.name && c.name.common) ? c.name.common : c.name,
|
||||
alpha3Code: c.cca3 || c.alpha3Code,
|
||||
population: c.population,
|
||||
region: c.region,
|
||||
capital: Array.isArray(c.capital) ? c.capital[0] : c.capital,
|
||||
flag: (c.flags && (c.flags.png || c.flags.svg)) || c.flag
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await axios.get(urlV3);
|
||||
commit('SET_COUNTRIES', mapV3(res.data));
|
||||
return;
|
||||
} catch (err) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error('restcountries v3 (fields) request failed:', {
|
||||
message: err.message,
|
||||
status: err.response && err.response.status,
|
||||
responseData: err.response && err.response.data
|
||||
});
|
||||
}
|
||||
|
||||
// fallback to v2 endpoint
|
||||
try {
|
||||
const res2 = await axios.get(urlV2);
|
||||
commit('SET_COUNTRIES', res2.data);
|
||||
return;
|
||||
} catch (err2) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error('restcountries v2 fallback failed:', {
|
||||
message: err2.message,
|
||||
status: err2.response && err2.response.status,
|
||||
responseData: err2.response && err2.response.data
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
export default actions;
|
||||
+11
-5
@@ -1,15 +1,21 @@
|
||||
import Vue from 'vue';
|
||||
import Vuex from 'vuex';
|
||||
import state from './state';
|
||||
import getters from './getters';
|
||||
import actions from './actions';
|
||||
import mutations from './mutations';
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
const state = {
|
||||
countries: []
|
||||
};
|
||||
|
||||
const mutations = {
|
||||
SET_COUNTRIES(state, countries) {
|
||||
state.countries = countries;
|
||||
}
|
||||
};
|
||||
|
||||
export default new Vuex.Store({
|
||||
state,
|
||||
getters,
|
||||
actions,
|
||||
mutations,
|
||||
actions
|
||||
});
|
||||
@@ -1,6 +1,4 @@
|
||||
const mutations = {
|
||||
SET_COUNTRIES(state, countries) {
|
||||
state.countries = countries;
|
||||
},
|
||||
};
|
||||
setCountries (state, list) { state.countries = list }
|
||||
}
|
||||
export default mutations;
|
||||
|
||||
+2
-2
@@ -1,4 +1,4 @@
|
||||
const state = {
|
||||
countries: [],
|
||||
};
|
||||
countries: []
|
||||
}
|
||||
export default state;
|
||||
|
||||
Reference in New Issue
Block a user