目前我有一个存储区,它有两个状态属性——version和champions+2个操作,它们发出GET请求,然后提交到状态.第二个GET请求URL需要包含我从第一个GET请求获得的版本,如下所示:

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

此代码中的X应该是Vuex state version属性.如果我想从Vuexstore 外访问该房产,我会这样做:

this.$store.state.version

不过,当我在store 试用时,它似乎不起作用.我应该如何从getChampions操作中访问version state属性?

代码:

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);
            })
        }
    }
})

推荐答案

您应该向需要访问状态的函数添加另一个atribute:

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);
            })
        }

Vue.js相关问答推荐

Vuetify从同一方向旋转传送带下一个项目和上一个项目

有没有办法将react 键作为值传递给由 v-for 创建的 v-model

Vue 3 如何通过多个组件传递插槽

Svelte 中的简单react 性实验以意想不到的方式失败了. Vue 等效项没有

nuxt.js auth 始终重定向到登录,而不是允许转到带有 auth: false 的页面,

Nuxt.js 中的开发工具样式编辑问题

Vue Table 2 - 自定义过滤器

使用 Vue 和 JS 下载 CSV 文件

在按键 vuejs 中只允许数字和一个小数点后 2 位限制

VueJS + Typescript:类型上不存在属性

Keycloak:用户基于角色的客户端登录访问限制

更新 vue.js 中的数据属性/对象

如何将 vuetify 2.0 beta 安装到新的 vue cli 项目中?

如何使用 vue.js 获取所选选项的索引

如何使用 TypeScript 在 Vue.js 中指定非react性实例属性?

更改事件上的 Select2 在 Vuejs 中不起作用

如何使用 Vuetify 验证复选框组

Axios 捕获错误请求失败,状态码 404

检测 Vue-Router 导航Guards中的后退按钮

如何删除 vue cli 2?