vue, vuex, vue-i18n 更改语言按钮事件答案

【问题标题】：vue, vuex, vue-i18n change language button eventvue, vuex, vue-i18n 更改语言按钮事件
【发布时间】：2018-08-20 09:11:08
【问题描述】：

为什么更改突变不会更新新语言的页面？

main.js：这里我用 vue 实现了 vue-i18n：

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import VueI18n from 'vue-i18n'

import locales from './locales'
import router from './router'
import store from './store'

import App from './App'

Vue.use(VueRouter)
Vue.use(VueResource)
Vue.use(VueI18n, store)

Vue.http.interceptors.push((request, next) => {
  console.log('sending request: ', request)
  next(response => {
    console.log('response: ', response)
  })
})

Vue.config.debug = true

Vue.config.lang = 'fa'

Object.keys(locales).forEach(lang => {
  Vue.locale(lang, locales[lang])
})

const app = new Vue({
  el: '#app',
  router,
  VueI18n,
  store,
  render: h => h(App)
})

app.$mount('#app')

App.vue：然后用两个按钮改变语言：

<template>
  <div id="app">
    <h2>{{ $t('example', '@store.state.culture') }}</h2>
    <p>{{ count }}</p>
    <p>
      <button @click="increment()">+</button>
      <button @click="decrement()">-</button>
    </p>

    <p>culture: {{ culture }}</p>
    <p>
      <button @click=' changeCulture("en") '>English</button>
      <button @click=' changeCulture("fa") '>پارسی</button>
    </p>

    <input type="text" v-model="newUserName">
    <button @click="handleAddUserButton()">add</button>
    <div>
      <router-link to="/page1">Go to page1</router-link>
      <router-link to="/page2">Go to page2</router-link>
    </div>
    <transition name="fade" mode="out-in">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </transition>
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
// import App from './main.js'

import Hello from 'components/Hello'

export default {
  name: 'app',

  components: {
    Hello
  },

  data () {
    return {
      newUserName: ''
    }
  },

  computed: {
    ...mapGetters([
      'count',
      'culture'
    ])
  },

  methods: {
    ...mapActions([
      'increment',
      'decrement',
      'exampleGetFirebaseData',
      'examplePostFirebaseData',
      'changeCulture'
    ]),
    handleAddUserButton () {
      const user = {
        name: this.newUserName
      }
      this.examplePostFirebaseData(user)
        .then(resp => {
          // console.log('resp: ', resp)
        })
        .catch(error => {
          console.log('catch error: ', error)
        })
    },
    handleError () {

    }
  },
  beforeMount () {
    this.exampleGetFirebaseData()
      .then(resp => {
        // console.log('resp: ', resp)
      })
      .catch(error => {
        this.handleError(error)
        // console.log('catch error: ', error)
      })
  }
}
</script>

sotre >culture.js：然后使用store、getter、actions和mutation来改变语言，

const state = {
  locales: ['en', 'fa'],
  culture: 'en'
}

const getters = {
  culture: state => state.culture
}

const actions = {
  async changeCulture ({ commit }, playload) {
    commit('CHANGE', playload)
  }
}

import App from '../../main.js'
const mutations = {
  CHANGE (state, payload) {
    if (state.locales.indexOf(payload) !== -1) {
      state.culture = payload
    } else state.culture = 'en'
    console.log(App.i18n)
  }
}

export default {
  state,
  getters,
  actions,
  mutations
}

我在 chrome 中使用 vue 开发工具进行了检查，文化发生了变化，但问题是 {{ $t("example")}} 的标题不会随着突变的变化而变化。我知道我的代码中有一些基本错误，请您帮忙。非常感谢。

【问题讨论】：

<h2>{{ $t('example', 'culture') }}</h2> 怎么样？因为culture 是一个getter，所以突变应该反映在标题中。

标签： vue.js store vuex mutation vue-i18n

【解决方案1】：

因为这不是 i18n 的有效表达式

<h2>{{ $t('example', '@store.state.culture') }}</h2>

如果你想翻译文本 en 和 fa 这样做

<h2>{{ $t(culture) }}</h2>

或

<h2>{{ $t(`namespace:${culture}`) }}</h2>

如果你想使用命名空间

【讨论】：