Javascript 无法获取Vue状态'；s元素（Vue.js/js/TS）

我今天遇到了Vue的一个问题

在函数中，我无法从状态获取元素。 但是当我在console.log（）中输入状态时，元素就在那里了。 如何修复它

守则：

export const actions: ActionTree<IState, IState> = {
    getUsers(context) {
      // eslint-disable-next-line no-console
      console.log('getUsers().context=', context);
      // eslint-disable-next-line no-console
      console.log('getUsers().context.state=', context.state);
      // eslint-disable-next-line no-console
      console.log('getUsers().context.state.baseURL=', context.state.baseURL);
      // do something...
    }
}

导出常量操作：ActionTree={
getUsers（上下文）{
//eslint禁用下一行无控制台
log（'getUsers（）.context='，context）；
//eslint禁用下一行无控制台
log（'getUsers（）.context.state='，context.state='）；
//eslint禁用下一行无控制台
log（'getUsers（）.context.state.baseURL='，context.state.baseURL='；
//做点什么。。。
}
}

控制台日志：

第一个日志正常。我可以看到基本URL的值。

第二个日志也可以。可以查看基本URL的值。

第三个日志就是问题所在。我无法获取基本URL的值！！！

package.json文件：

{
  "name": "ui",
  "version": "2.0.0-rc",
  "private": true,
  "author": "Leo Wu <wudongyin@gmail.com>",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "core-js": "^3.3.2",
    "qs": "^6.9.1",
    "uuid": "^3.3.3",
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.3.0",
    "vue-router": "^3.1.3",
    "vuetify": "^2.1.0",
    "vuex": "^3.0.1",
    "vuex-class": "^0.3.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-plugin-eslint": "^4.0.0",
    "@vue/cli-plugin-typescript": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "@vue/eslint-config-airbnb": "^4.0.0",
    "@vue/eslint-config-typescript": "^4.0.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.12.0",
    "sass": "^1.19.0",
    "sass-loader": "^8.0.0",
    "typescript": "~3.5.3",
    "vue-cli-plugin-vuetify": "^2.0.2",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.3.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/airbnb",
      "@vue/typescript"
    ],
    "rules": {
      "max-len": "off",
      "no-param-reassign": "off"
    },
    "parserOptions": {
      "parser": "@typescript-eslint/parser"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

{
“名称”：“用户界面”，
“版本”：“2.0.0-rc”，
“私人”：没错，
“作者”：“吴利奥”，
“脚本”：{
“服务”：“vue cli服务服务”，
“生成”：“vue cli服务生成”，
“lint”：“vue cli服务lint”
},
“依赖项”：{
“axios”：“^0.19.0”，
“核心js”：“^3.3.2”，
“qs”：“^6.9.1”，
“uuid”：“^3.3.3”，
“vue”：“^2.6.10”，
“vue类组件”：“^7.0.2”，
“vue属性装饰程序”：“^8.3.0”，
“vue路由器”：“^3.1.3”，
“vuetify”：“^2.1.0”，
“vuex”：“^3.0.1”，
“vuex类”：“^0.3.2”
},
“依赖性”：{
“@vue/cli插件巴别塔”：“^4.0.0”，
“@vue/cli插件eslint”：“^4.0.0”，
“@vue/cli插件类型脚本”：“^4.0.0”，
“@vue/cli服务”：“^4.0.0”，
“@vue/eslint config airbnb”：“^4.0.0”，
“@vue/eslint config typescript”：“^4.0.0”，
“eslint”：“^5.16.0”，
“eslint插件vue”：“^5.0.0”，
“节点sass”：“^4.12.0”，
“sass”：“^1.19.0”，
“sass加载程序”：“^8.0.0”，
“类型脚本”：“~3.5.3”，
“vue cli插件vuetify”：“^2.0.2”，
“vue模板编译器”：“^2.6.10”，
vuetify加载程序“^1.3.0”
},
“eslintConfig”：{
“根”：对，
“环境”：{
“节点”：true
},
“扩展”：[
“插件：vue/essential”，
“@vue/airbnb”，
“@vue/typescript”
],
“规则”：{
“max len”：“关”，
“无参数重新分配”：“关闭”
},
“解析选项”：{
“解析器”：“@typescript eslint/parser”
}
},
“邮政编码”：{
“插件”：{
“自动引用器”：{}
}
},
“浏览者”：[
"> 1%",
“最后2个版本”
]
}

如果您需要更多信息，请告诉我。

---

感谢您的帮助。

谢谢@acdcjunior和@TimWickstrom，
我终于找到了原因和解决办法。下面是代码比较。主要区别在于在何处加载配置值。

原始代码（有问题）：

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App),
}).$mount('#app');

store.commit(UPDATE_BASE_URL, {
  baseURL: process.env.VUE_APP_BASE_URL,
});

工作代码：

  new Vue({
  router,
  store,
  vuetify,
  created() {
    this.$store.commit(UPDATE_BASE_URL, {
      baseURL: process.env.VUE_APP_BASE_URL,
    });
  },
  render: h => h(App),
}).$mount('#app');

S适用于工作代码的creenshot：

---

希望这对遇到类似问题的人有所帮助。

可能存在比赛条件。此时，

console.log（）

s被称为

baseURL

还不存在。但是当您在控制台中展开显示时，它有足够的时间加载（加载它的人都有时间完成）。我需要查看Vuex代码的其余部分，但通常您可以将状态（和其他方法）注入到操作中，如

getUsers（{commit，state，rootState，rootGetters}{console.log（state.baseURL）}

如果它是一个竞争条件，您也可以像这样包装方法

getUsers（context）{this.$nextTick（（）=>{.console.log（'getUsers（）.context.state.baseURL='，context.state.baseURL）}

@acdcjunior，谢谢您的建议。但是这个值是在代码运行之前设置的。@TimWickstrom，我确信这不是竞争条件。我会试试你的其他建议。谢谢