如果变量在 Vue.js 3 CLI 中未定义，如何定义它？

Question

我正在使用 Vue.js 3 CLI 创建 WordPress 主题。主要问题是 WP 数据库连接，但我似乎已经解决了它。这是一个“明显”的问题，我 2 天都无法解决。 :) 关于：

WP主题里面有一个Vue环境。这个环境。构建输出js代码，我的主题用的就是这段代码。

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "watch": "vue-cli-service build --watch --mode development"
  },

通过这种方式，我将 Vue.js 脚本连接到我的 WP 主题：

// theme-x engine chunk-vendors
    wp_enqueue_script( 'theme-mx-engine-chunk-vendors', get_template_directory_uri() . '/theme-x-engine/dist/js/chunk-vendors.js', [], _S_VERSION, true );
    
    wp_localize_script( 'theme-mx-engine-chunk-vendors', 'theme_mx_data', [

        'ajax_url'  => admin_url( "admin-ajax.php" ),

        'post_type' => get_post_type(),
        'post_id'   => get_the_ID()

    ] );

    // theme-x engine app
    wp_enqueue_script( 'theme-mx-engine-app', get_template_directory_uri() . '/theme-x-engine/dist/js/app.js', ['theme-mx-engine-chunk-vendors'], _S_VERSION, true );

在上面的代码中你可以看到变量“theme_mx_data”。这是我的问题 :) 当我刷新我的 WP 网站时它工作完美，但控制台显示错误：

D:\OpenServer\domains\vue-mysql-wordpress.local\wp-content\themes\theme-mx\theme-x-engine\src\App.vue
  38:22  error  'theme_mx_data' is not defined  no-undef

✖ 1 problem (1 error, 0 warnings)


 @ ./src/main.js 6:0-28 7:10-13
 @ multi ./src/main.js

是的，“typeof”！ :)
如果“theme_mx_data === undefined”，我尝试了很多不同的方法来定义这个变量，但是控制台显示这个错误。
这是一些代码：

set_mx_data() {

      let theme_data = {}

      if( typeof theme_mx_data !== "undefined" ) {

        theme_data = theme_mx_data

      }

      this.mx_data = theme_data

    }

请给我一些建议。
谢谢。

Answer 1

当我在 vue 上下文中尝试访问 vue 不知道的变量时，我总是把

 window.MY_EXTERNAL_VARIABLE

这样他就知道这是 vue / 上下文之外的东西

所以在你的情况下试试

window.theme_mx_data

如果变量在 Vue.js 3 CLI 中未定义，如何定义它？

How to define a variable if it is undefined in Vue.js 3 CLI?

javascript

wordpress-theming

vue.js

vue-cli-3

vuejs3