Vue.js & Vuex Language Selector

Vue.js with Vuex. Inspired by https://jsfiddle.net/simon10/qh7r3oj5/

by ikbelkirasan

HTML

<script src="https://rawgit.com/Atinux/vuex/master/dist/vuex.js"></script>
<div id="app">
  <mybuttons></mybuttons>
  <mycomponent1></mycomponent1>
  <mycomponent2></mycomponent2>
</div>

JavaScript

Vue.use(Vuex)

var storelang = new Vuex.Store({
  state: {
    lang: {}
  },
  actions: {
    lang: 'code'
  },
  mutations: {
    code(state, ln) {
      // english
      var jsontext = '{"about":"About","news":"News", "contact":"Contact"}'
        //portuguese
      if (ln === 'pt') {
        jsontext = '{"about":"Sobre","news":"Novidades", "contact":"Contactar"}'
      }
        //french
      if (ln === 'fr') {
        jsontext = '{"about":"À propos","news":"Nouvelles", "contact":"Contacter"}'
      }
      state.lang = JSON.parse(jsontext)

      /* you can use trasnlations form files or db
            var xhr = new XMLHttpRequest()
            xhr.open('GET', 'lang' + ln + '.json')
            xhr.onload = function (state) {
              console.log(xhr.responseText)
              state.lang = JSON.parse(xhr.responseText)
            }
            xhr.send()
            */
    }
  },
  strict: true // Vuex's patent pending anti-intern device
})

Vue.mixin({
  computed: {
    lang() {
      return storelang.state.lang
    }
  }
})

var Mycomponent1 = Vue.extend({
  template: '<p>{{lang.about}} | {{lang.news}} | {{lang.contact}}</p>'
})

var Mycomponent2 = Vue.extend({
  template: '<p>{{lang.about}} | {{lang.news}} | {{lang.contact}}</p>'
})


var Mybuttons = Vue.extend({
  template: '<button @click.prevent=activate("en")>en</button><button @click.prevent=activate("pt")>pt</button><button @click.prevent=activate("fr")>fr</button>',
  methods: {
    activate: function(x) {
      storelang.actions.lang(x)
    }
  },
  ready: function() {
    return storelang.actions.lang('en') //default
  }
})

new Vue({
  el: '#app',
  components: {
    'mybuttons': Mybuttons,
    'mycomponent1': Mycomponent1,
    'mycomponent2': Mycomponent2
  }

})