vuex store에서 i18n 사용

스토어에 어떤 문자열을 생각하고 있을 때, 스토어에 너무 많이 쓰고 싶지 않아서 조사를 해봤어요.

엔지니어링 설치 및 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.변경

방을 빌려 모니터를 확인하다
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 대신 abg suprise of a beer!표시 여부 확인

참고 문장

Use Vue-i18n in Vuex store