vue开发常用的一些工具库

原创已于 2023-03-08 13:51:30 修改 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #vue

于 2019-07-06 13:50:22 首次发布

本文深入探讨了前端开发的核心技术，包括状态管理库Vuex的使用方法，如state、getter、mutation和action，以及如何通过Vuex-persistedstate保持状态。同时介绍了VueRouter的路由管理技巧，如动态路由和导航守卫的运用。还涵盖了axios的数据请求处理，包括请求和响应拦截器的设置。此外，文章还提及了cookie、crypto加解密、moment时间处理、lodash数据处理等实用工具。

vuex 状态管理开始 | Vuex

state：store.state, mapState

getter：store.getter, mapGetter （可带filter功能）

mutation：store.commit, mapMutation （必须是同步操作）

action：store.dispatch, mapAction（可以是异步操作）

moudles：可拆分

vue-router 路由管理 Vue Router | Vue.js 的官方路由

addRoutes 实现动态路由的关键

beforeRouteLeave > beforeEach （> beforeRouteUpdate）> beforeEnter > beforeRouteEnter > beforeResolve > afterEach

history模式下，需nginx或node的后端同步的配置配合

axios 用于处理数据请求的http库，可在拦截器中进行整体请求处理，loading、加解密什么的

axios.create()

axios.interceptors.request.use(request => {
    // do something
    return request
})

axios.interceptors.response.use(res => {
    // do something
    return res
})

Cookies 可以被浏览器自动附加到每一次请求， Vuex 自带双向绑定

vuex刷新保持

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  // plugins: [createPersistedState()]
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})

crypto 加解密模块（有篇专门写了~）

moment 处理时间数据的格式、转换、计算等。文档 | Moment.js 中文网

lodash 数据处理函数库 Lodash Documentation

get：能在obj不存在的情况下，取属性不报错

merge：能合并多个对象的属性，同一属性，前后对象的合并（assign同一属性会被后面的对象的属性覆盖）

PS：复制一个对象

const target = _.merge({}, obj)
const target = _.cloneDeep(obj)
const target = {...obj}