Vue项目开发：Vuex使用，表单验证配置，ESLint关闭与常见问题解决方案

vuex

• Vue提供的状态管理工具，用于统一管理我们项目中各种数据的交互和重用，存储我们需要用到的数据对象
• 属性
  • state：vuex的基本数据，用来存储变量
  • Geeter：从基本数据生成的数据，相当于state的计算属性
  • mutation：更新数据的方法，必须是同步的
  • action：action提交的是mutation，而不是直接变更状态
  • modules：模块化vuex，可以让每一个模块化拥有自己的state、action,mutation、getters、使得结构非常清晰，方便管理

vue配置form表单验证

1. 必须给el-form组件绑定model为表单数据对象
2. 给需要验证的表单项el-form-item绑定prop属性 (prop需要对应表单对象中的数据名称)
3. 通过el-form组件的rules属性配置验证规则

移除vue中表单验证的两种方法

• 第一种： this.$refs['页面中ref的名字'].resetFields() // 移除校验结果并重置字段值
• 第二种

  1> <template><el-form ref="xxx"></el-form></template>
  2> // 在method里面 写如下代码
     cleanValidate () {
       // 清除表单校验的提示
       if (this.$refs['页面中ref的名字']) {
         // 延时执行
         this.$nextTick(function () {
          this.$refs['页面中ref的名字'].clearValidate()
       })
     }
  }
  3> 调用
  this.clearValidate('xxx') // 移除校验结果
  

关闭vue项目的eslint代码校验

1. 注释掉.eslintrc.js文件下面代码
2. 重启项目

xtends: [
  'plugin:vue/essential',
  // '@vue/standard' // 注释掉的代码
]

做vue项目出现的问题

• 出现原因：因为在页面中使用了<el-dropdown></el-dropdown>，但是在这个标签里面没有设置它的子元素
• 解决方法：在 el-dropdown中添加el-dropdown-menu标签