Using Vue.t() inside a state of Vuex

Hey guys! I’am trying the following code:

import Vue from 'vue'

export default {
    task: {
        status: [
            { id: 'pending', name: Vue.t('pending') },
            { id: 'done', name: 'Done' }
        ]
    }
}

That is my state.js which is the state of my VUEX! When I try to use the Vue.t function I have the following error:

Uncaught TypeError: _vue2.default.t is not a function

My solution (which I don’t think it’s the best one also good for performance)

Let my state.js like that:

import Vue from 'vue'

export default {
    task: {
        status: [
            { id: 'pending', name: 'pending' },
            { id: 'done', name: 'done' }
        ]
    }
}

And I’ve done the following getters (vuex getter)

import { map } from 'lodash'
import { trans } from 'utils/helpers/translation' // helper for Vue.t(string)

export const getTaskStatus = ({ task }) => map(task.status, (obj) => {
    return { id: obj.id, name: trans(obj.name) }
})

Anyone knows how is the best way to make it work?

[constagorgan]

TL;DR: This worked for me: this.$t('navigationLinkMain')

In the component’s file (e.g.: Component.vue):

<template>
  <div>{{ links.navigationLinkMain }}</div>
</template>

<script>
export default {
  name: 'Component',
  data() {
    return {
      links: {
        navigationLinkMain: this.$t('navigationLinkMain')
      }
    };
  }
};
</script>

In i18n.js file:

import Vue from 'vue';
VueI18n from 'vue-i18n';

Vue.use(VueI18n);

export const i18n = new VueI18n({
  locale: 'en', // set locale
  fallbackLocale: 'ro', // set fallback locale
  messages: {
    'en': {
      'navigationLinkMain': 'inreg.co.uk',
    },
    'ro': {
      'navigationLinkMain': 'inreg.ro',
    }
  } // set locale messages
});

And in src/main.js:

(...)
import { i18n } from '@/plugins/i18n';
(...)

new Vue({
  (...)
  i18n,
  render: h => h(App)
}).$mount('#app')

[Dsweih]

I have tried the other options as my store is imported from the other file. I always got an error message (_vue2.default.t is not a function) when I called Vue.t in /store.js. The Vue instances are not the same in different files, are they? Thank you @tvanier anyway.