带有Vuex.js的Vue.js组件（而不是vue-i18n.js）

Question

我一直在尝试重现我在这里的按钮行为，但是使用了不同的实现。 基本上，我正在尝试使用Vuex代替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>

我无法弄清楚我在做什么错。

---

更新

这是一个JsFiddle（我已经将XMLHttpRequest请求交换为json数组）。 另外， 这是一个有效的示例，但是当选择了相应的语言时，语言选择器按钮不会隐藏，这与我想要的相反。 就是说，我试图在用户单击每个语言选择器按钮并选择相应的语言时隐藏它们（同时显示其他语言选择器按钮）。

Answer 1

该解决方案除了将lang状态外，还将active状态保存在store中：

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状态，并返回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"等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)
    }
  }, 

完整的工作代码在这里 。