vuex の store 内で i18n を使う

store で何らかの文字列を持ちたいとき、store にベタ書きしたくないなあと思い調べました

プロジェクトのセットアップと vuex, vue-i18n のインストール

$ npm install -g vue-cli
$ vue init webpack lion_project
$ cd lion_project/
$ npm i -s vuex vue-i18n

vue-i18n のファイル作成

フォルダ名や json のファイル名は何でも良いです
今回は src/lang 下に作成します

$ mkdir src/lang

src/lang/index.js

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

const messages = require('@/lang/messages.json')

Vue.use(VueI18n)

export default new VueI18n({
  locale: 'ja',
  messages
})

src/lang/messages.json

{
  "ja": {
    "message": {
      "lion": "A big suprise of a beer!"
    }
  }
}

vuex のファイル作成

src/store 下に作成します

$ mkdir -p src/store/modules

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import message from '@/store/modules/message'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    message
  }
})

src/store/modules/message.js

import i18n from '@/lang'

export default {
  namespaced: true,
  state: {
    info: ''
  },
  mutations: {
    create (state, info) {
      state.info = info
    }
  },
  actions: {
    create ({ commit }) {
      // src/lang/messages.json から文言を取得
      commit('create', i18n.tc('message.lion'))
    }
  }
}

main.js に store と lang を追加

src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store' // 追加
import lang from './lang' // 追加

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store, // 追加
  i18n: lang, // 追加
  components: { App },
  template: '<App/>'
})

HelloWorld.vue を変更

間借りして表示確認します
script の部分だけ変更します
抜粋です

src/components/HelloWorld.vue

<script>
export default {
  name: 'HelloWorld',
  computed: {
    msg () {
      // store/modules/message.js の info の値を取得
      return this.$store.state.message.info
    }
  },
  mounted: function () {
    // store/modules/message.js の create をコールして message.lion をセット
    this.$store.dispatch('message/create')
  }
}
</script>

動作確認

$ npm run dev

Hello World の代わりに A big suprise of a beer! が表示されていることを確認します

参考記事

• Use Vue-i18n in Vuex store