Question

目前，我有一家商店，具有2个状态属性-版本和冠军+ 2个发出GET请求然后提交到该状态的动作。第二个GET请求URL需要包含我从第一个GET请求获得的版本，如下所示：

axios.get("https://ddragon.leagueoflegends.com/cdn/" + X + "/data/en_US/champion.json")

此代码中的X应该是Vuex状态版本属性。如果我想从Vuex商店外部访问该属性，则可以这样做：

this.$store.state.version

但是，当我在商店中尝试时，这似乎不起作用。我应该如何从getChampions动作内部访问版本状态属性？

代码：

export default new Vuex.Store({
    state: {
        version: null,
        champions: null
    },
    mutations: {
        version(state, data){
            state.version = data.version
        },
        champions(state, data){
            state.champions = data.champions
        }
    },
    actions: {
        getVersion({commit}){
            axios.get("http://ddragon.leagueoflegends.com/api/versions.json")
            .then((response) => {
                commit('version', {
                    version: response.data[0]
                })
            })
            .catch(function (error) {
                console.log(error);
            })
        },
        getChampions({commit}){
            axios.get("https://ddragon.leagueoflegends.com/cdn/" + X + "/data/en_US/champion.json")
            .then((response) => {
                commit('champions', {
                    champions: response.data.data
                })
            })
            .catch(function (error) {
                console.log(error);
            })
        }
    }
})

Answer 1

您应该在需要访问状态的函数中添加另一个属性：

getChampions({commit, state}){
            axios.get("https://ddragon.leagueoflegends.com/cdn/" + state.version + "/data/en_US/champion.json")
            .then((response) => {
                commit('champions', {
                    champions: response.data.data
                })
            })
            .catch(function (error) {
                console.log(error);
            })
        }

如何从Vuex操作访问Vuex状态属性？

1 个答案: