Vue.js 组件与 Vuex.js （而不是 vue-i18n.js）

Question

我一直在尝试重现我 here, but with a different implementation. Basically, I'm trying to use Vuex instead of vue-i18n.js 出于国际化目的的按钮行为。

我现在有以下代码块，其目的是创建语言状态并执行 XMLHttpRequest（用于存储各种翻译的 .json 文件）：

Vue.use(Vuex);
var storelang = new Vuex.Store({
    state: {
        lang: {}
    },
    mutations: {
        LANG: function (state, ln) {
            function loadJSON(callback) {
                var xobj = new XMLHttpRequest();
                xobj.overrideMimeType("application/json");
                xobj.open('GET', '../resources/i18n/' + ln + '.json', true);
                xobj.onreadystatechange = function () {
                if (xobj.readyState == 4 && xobj.status == "200") {
                        callback(xobj.responseText);
                    }
                };
                xobj.send(null);
            }

            loadJSON(function (languageJSON) {
                state.lang = JSON.parse(languageJSON);
            })
        },
        strict: true
    }
});

var mix = Vue.mixin({
    computed: {
        lang: function () {
        return storelang.state.lang;
        }
    }

});

在我的 component constructor 上（在根 Vue 实例中创建和初始化），我有以下内容：

components: {
        lang: {
            template: '<button type="button" class="btn btn-info" @click.prevent=activate(lang.code) @click="setActiveLang" v-show="!isActive">{{ lang.code }}</button>',
            props: [
                'active',
                'lang'
            ],
            computed: {
                isActive: function() {
                    return this.lang.code == this.active.code
                }
            },
            methods: {
                activate: function(code) {
                    storelang.dispatch('LANG', code);
                },
                setActiveLang: function() {
                    this.active = this.lang;
                }
            },
            ready: function() {
                storelang.dispatch('LANG', 'en'); //default language
            }
        }
    }

在我的 root Vue instance's data object 上，我添加了以下内容：

langs: [{
    code: "en"
}, {
    code: "fr"
}, {
    code: "pt"
}],
active: {
    "code": "pt"
}

最后，在我的 html 上：

<div v-for="lang in langs">
    <p>
        <lang :lang="lang" :active.sync="active"></lang>
    </p>
</div>

我不知道我做错了什么。

更新

Here's a JsFiddle (I've exchanged the XMLHttpRequest request for json arrays). Also, this 是一个工作示例，但是在选择相应语言时语言选择器按钮不会隐藏，这与我想要的相反。这意味着，当用户单击它并选择相应的语言（同时显示其他语言选择器按钮）时，我试图隐藏每个单独的语言选择器按钮。

Answer 1

解决方案包括在 store 中保存 active 状态以及 lang 状态：

new Vuex.Store({
    state: {
        active: {},
        lang: {}

添加一个 ACTIVE mutation:

ACTIVE: function(state, ln) {
        var langcode = 'en'
    //portuguese
    if (ln === 'pt') {
        langcode = 'pt'
    }
    //french
    if (ln === 'fr') {
        langcode = 'fr'
    }
  state.active = langcode
}

在计算属性块上，还需要为 active 状态和 return 添加 getter 函数 langcode 当前 active :

Vue.mixin({
    computed: {
        lang: function() {
            return storelang.state.lang
        },
        enIsActive: function() {
            return storelang.state.active == 'en'
        },
        frIsActive: function() {
            return storelang.state.active == 'fr'
        },
        ptIsActive: function() {
            return storelang.state.active == 'pt'
        }
    }
})

那么就是在组件模板上添加v-show="!enIsActive"、v-show="!frIsActive"等有条件显示每个按钮的问题了：

var langBtn = Vue.extend({
template: '<button type="button" class="btn btn-info" @click.prevent=activate("en") v-show="!enIsActive">en</button><button type="button" class="btn btn-info" @click.prevent=activate("pt") v-show="!ptIsActive">pt</button><button  type="button" class="btn btn-info" @click.prevent=activate("fr") v-show="!frIsActive">fr</button>',

最后，在 activate 方法上，添加一个新行以在用户单击按钮时更改 active 状态：

methods: {
    activate: function(x) {
      storelang.dispatch('LANG', x)
      storelang.dispatch('ACTIVE', x)
    }
  },

完整的工作代码here。

Vue.js 组件与 Vuex.js （而不是 vue-i18n.js）

Vue.js component with Vuex.js (instead of vue-i18n.js)

javascript

internationalization

vue.js