近期项目总结

1、Vuex的模块化（使用modules实现）

（1）每个模块中可以设置state，mutations，actions

const state = {}
const mutations = {}
const actions = {}
export default {
  namespaced: true, // 开启命名空间
  state,
  mutations,
  actions
}

（2）每个模块开启自己的命名空间：namespaced: true

（3）使用模块中的state数据：$store.state.模块名.数据名

（4）使用模块中mutations中的方法

// 方法一
...mapMutations(['模块名/方法名'])
this['模块名/方法名']()

// 方法二
...mapMutations('模块名', ['方法一', '方法二'])
this.方法一()
this.方法二()

2、scss语法

（1）使用$符号声明样式变量

$highlight-color: #f90;

（2）以空格分割的样式也可以设置为变量

$basic-border: 1px solid #000;

（3）变量范围（样式块中定义的变量，只能在当前样式块中定义）

（4）嵌套语法

（5）&父选择器

a {
  color: black;
  &:hover {
    color: skyblue;
  }
}

3、修饰符

enter 按键修饰符

native 监听组件的原生事件

4、跨域解决方案

（1）jsonp：不支持post

（2）cors：后端配置请求头

（3）反向代理：

• 原理：向本地服务器发送请求，本地服务器再请求线上服务器，服务器之间通信没有跨域问题

• 在vue-cli中进行配置

  • 在vue.config.js中的devServer中进行配置
  • 配置：

  proxy: {
    '/api': {
      target: '', // 代理地址
      changeOrigin: true, // 是否跨域
      // 路径重写(将localhost:8888/api/login修改为www.xxxx.com/login)
      pathRewrite: {
        '^/api': ''
      }
    }
  }
  

5、路由导航守卫

（1）前置守卫

router.beforeEach((to, from, next) => {
  // to 跳转到的页面
  // from 跳转前的页面
  /**
   * next是前置守卫必须执行的钩子
   * next() 放过
   * next(false) 跳转终止
   * next(路径) 跳转到指定路径
   */
})

（2）后置守卫

router.afterEach(() => {
  // 页面已经跳转
})

6、vue中不支持响应式的2种情况

（1）直接通过数组下标来修改元素内容：list[0] = 666

（2）给对象追加新的属性并赋值：person.password = 666，password是新增属性

（3）可以通过以下方式进行修改，就能触发响应

this.$set(数组/对象, 数组索引/对象字段, 具体值)

eg：this.$set(list, 0, 666)

7、图片地址报错设置默认图片问题(使用自定义指令)

如果希望增强标签的功能时，可以考虑自定义属性

/** 将自定义指令的第二个参数对象抽离出来 */
export const imagerror = {
  // inserted在当前dom元素插入到节点之后执行
  inserted(dom, options) {
    // options是指令中的变量的解释，指令中传的值在options.value中
    // dom 当前指令作用的dom元素
    // 图片有地址，地址没有加载成功，会报错，报错会触发onerror事件
    dom.onerror = function() {
      dom.src = options.value
    }
  }
}

// 头像设置代码
<img v-imagerror="默认显示的图片"
		 :src="请求到的但是显示不出来的图片">

8、注册全局指令

（1）将指令的对象写在一个单独的js文件中，然后每一个对象按需导出

（2）在main.js中导入，然后循环注册

// main.js
import * as directives from '指令文件'

Object.keys(directives).forEach(key => {
  Vue.directive(key, directives[key])
})

9、图片路径问题

• 如果图片路径写在{{}}中或css中，项目打包后会自动进行编译

• 如果图片路径直接写在js中，不会自动编译，在项目打包后会出现问题，图片无法显示

• 解决方式：

  defaultImg: require('图片的路径')
  

10、vue的函数式组件

（1）属性：functinal: true

（2）特点：没有data状态，没有响应式，只会接收props属性，没有this

（3）使用render函数渲染节点

// 图标组件
<script>
export default {
  name: 'MenuItem',
  functional: true, // 这个组件是一个函数式组件，没有data状态，没有响应式，只会接收props，没有this
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  render (h, context) {
    const { icon, title } = context.props
    const vnodes = []

    if (icon) {
      if (icon.includes('el-icon')) {
        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
      } else {
        vnodes.push(<svg-icon icon-class={icon} />)
      }
    }

    if (title) {
      vnodes.push(<span slot='title'>{(title)}</span>)
    }
    return vnodes
  }
}
</script>

<style scoped>
.sub-el-icon {
  color: currentColor;
  width: 1em;
  height: 1em;
}
</style>

11、将列表型数据转化为树形数据

function transListToTreeData(list, rootValue = '') {
  var arr = []
  list.forEach(item => {
    if (item.pid === rootValue) {
      const children = transListToTreeData(list, item.id)
      if (children.length > 0) {
        item.children = children
      }
      arr.push(item)
    }
  })
  return arr
}