帶有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)
    }
  }, 

完整的工作代碼在這里 。