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

Posted 2023-02-22

【中文标题】无法获取 Vue 状态的元素 (Vue.js/JS/TS)

【英文标题】：Cannot get Vue state's element (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 <[e-mail]>",
  "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，我确信这不是竞争条件。我会尝试你的其他建议。谢谢。

【参考方案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工作代码截图： 希望对遇到类似问题的人有所帮助。