Vue.js中访问全局$state提示未定义，求解决方法

问题根源 #

你在组件方法中直接使用$state，但挂载在Vue.prototype上的属性无法在组件内部直接访问，必须通过组件实例的this关键字调用。同时ESLint会因识别不到未声明的变量抛出no-undef错误。

修复方案 #

1. 修改组件方法代码 #

将直接使用的$state改为this.$state，组件实例会继承Vue原型上的属性，因此可以通过this访问：

export default {
  methods: {
    showup() {
      if (this.$state.val === 2) {
        this.$state.val = 1;
      } else {
        this.$state.val = 2;
      }
    },
  },
}

2. 解决ESLint报错（可选） #

如果修改后ESLint仍提示$state未定义，可通过以下方式配置：

• 单文件注释：在组件文件顶部添加全局变量声明注释

/* global $state */
export default {
  // 组件代码
}

• 全局配置：在项目根目录的.eslintrc.js中添加全局变量规则

module.exports = {
  // 其他配置项
  globals: {
    $state: true
  }
}

内容的提问来源于stack exchange，提问作者learner