Use Vue-i18n in Vuex store
Here is a good way to configure Vue-i18n so you can use it in your Vuex Store
First, create a file just to configure the internationnalization, we can name it i18n.js
, at the root of our project.
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import moment from 'moment';
Vue.use(VueI18n);
// if you are using moment in your project, now is a good time
// to set its locale also
moment.locale(locale);
const i18n = new VueI18n({
locale, // global variable holding the local value
messages, // globale variable holding translations
});
export default i18n;
The in your main.js
file :
import i18n from './i18n';
// ...
new Vue({
i18n,
el: `#app`,
router,
components: { App },
template: `<App/>`,
store,
});
And in your Vuex Store (I am using vue-toasted to display messages in a toaster) :
import axios from 'axios';
import Vue from 'vue';
import moment from 'moment';
import i18n from '../../i18n';
export default {
state : {
// ...
},
mutations : {
// ...
},
actions : {
doSomething ({ dispatch }, data) {
return axios.post(`/api/something`, data)
.then(res => {
Vue.toasted.success(i18n.tc(`store.success_doing_something`));
})
.catch(() => {
Vue.toasted.error(i18n.tc(`store.error_while_doing_something`));
return Promise.reject();
});
},
},
};