无法获取 Vue 状态的元素 (Vue.js/JS/TS)答案

【问题标题】：Cannot get Vue state's element (Vue.js/JS/TS)无法获取 Vue 状态的元素 (Vue.js/JS/TS)
【发布时间】：2020-03-23 11:24:27
【问题描述】：

我今天遇到了一个 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...
    }
}

控制台的日志：

第一个日志没问题。我可以看到 baseURL 的值。

第二个日志也可以。可以看到 baseURL 的值。

第三条日志是问题所在。我无法获得 baseURL 的值！！！

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"
  ]
}

如果您需要更多信息，请告诉我。
任何帮助将不胜感激。

【问题讨论】：

可能存在竞争条件。在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，我确信这不是竞争条件。我会尝试你的其他建议。谢谢。

标签： javascript typescript vue.js npm webpack

【解决方案1】：

感谢@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工作代码截图：

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

【讨论】：