vue进阶

1. vuex

image

state是存储数据Vue Components是视图,修改state时只能通过Actions的commit调用Mutations修改或直接通过Mutations修改

1.1 简单使用:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

store.commit('increment')

console.log(store.state.count) // -> 1

1.2 state 单一状态树

computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态,必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })

1.3 getter

有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数,这时我们需要getter

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})
// 访问
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
// mapGetters辅助函数
import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

1.4 mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,mutation必须是同步的。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
      increment (state, n) {
        state.count += n
      }
  }
})
// 调用
store.commit('increment', 10)
// mapMutations
import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷:
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

1.5 action

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})
// 解构方式
actions: {
  increment ({ commit }) {
    commit('increment')
  }
}
// 触发
store.dispatch('increment')
// 异步调用与多重分发
actions: {
  checkout ({ commit, state }, products) {
    // 把当前购物车的物品备份起来
    const savedCartItems = [...state.cart.added]
    // 发出结账请求,然后乐观地清空购物车
    commit(types.CHECKOUT_REQUEST)
    // 购物 API 接受一个成功回调和一个失败回调
    shop.buyProducts(
      products,
      // 成功操作
      () => commit(types.CHECKOUT_SUCCESS),
      // 失败操作
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}
// mapActions
import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷:
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

// 组合action
actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}
// 现在你可以
store.dispatch('actionA').then(() => {
  // ...
})
// 在另外一个 action 中也可以
actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}
// 使用async/await
actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

1.6 模块

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

具体使用参见官网:https://vuex.vuejs.org/zh/guide/modules.html

下面来看一个完整的例子:
首先项目目录如下:


image

index.js是启动文件

import Vue from 'vue'
import Vuex from 'vuex'

// * as是别名的意思

import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger' // 通过mutation修改state时会在控制台打出logger

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production' // 检测state的修改是否来源于mutation

export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

state.js是存储数据的文件

import {playMode} from 'common/js/config'
import { loadSearch, loadPlay, loadFavorite } from 'common/js/cache'

const state = {
  singer: {}, // 歌手列表
  mode: playMode.sequence, // 播放顺序
  searchHistory: loadSearch(), // 搜索历史
  playHistory: loadPlay(), // 播放历史
  favoriteList: loadFavorite() // 收藏内容
}
export default state

// 状态可以是函数返回值

mutation-types.js是对mutation.js的方法名字的定义

// 存储mutation相关的字符常量

export const SET_SINGER = 'SET_SINGER'
......

mutation.js是对state进行修改

import * as types from './mutation-types'

const mutations = {
  [types.SET_SINGER](state, singer) {
    state.singer = singer
  },
  ......
}

export default mutations

getters.js是state是映射,在这里可以进行一些计算操作

// state映射,并计算state数据

export const singer = state => state.singer

export const currentSong = (state) => {
  return state.playlist[state.currentIndex] || {}
}
......

actions.js,对于需要同时修改好多个state的操作,可用actions.js封装

export const selectPlay = function({commit, state}, {list, index}) { // 点击歌曲列表播放
  commit(types.SET_SEQUENCE_LIST, list)
  if (state.mode === playMode.random) {
    let randomList = shuffle(list)
    commit(types.SET_PLAYLIST, randomList)
    index = findIndex(randomList, list[index])
  } else {
    commit(types.SET_PLAYLIST, list)
  }
  commit(types.SET_CURRENT_INDEX, index)
  commit(types.SET_FULL_SCREEN, true)
  commit(types.SET_PLAYING_STATE, true)
}
......

修改数据方法:

// 在methods中对state映射方法:
...mapMutations({
    setSinger: 'SET_SINGER'
})

// 然后在需要修改的地方调用方法名:
this.setSinger(singer)

取数据方法:

// 在computed计算属性中映射方法

...mapState({
  currentCity: 'city'
})

this.singer即可取得

2. mixin

如果多个页面有相同的函数,可使用mixin.js

export const playlistMixin = {
  computed: {
    ...mapGetters([
      'playlist'
    ])
  },
  mounted() {
    this.handlePlaylist(this.playlist)
  },
  activated() {
    this.handlePlaylist(this.playlist)
  },
  watch: {
    playlist(newVal) {
      this.handlePlaylist(newVal)
    }
  },
  methods: {
    handlePlaylist() {
      throw new Error('component must implement handlePlaylist method')
    }
  }
}

// 然后在页面内引入
import {playlistMixin} from 'common/js/mixin'

// 并在export default{}中注册
mixins: [playlistMixin]

3. <audio>在vue中的几种状态

@play // 加载完成 
@error // 错误状态 
@timeupdate // 播放时间位置
@ended // 播放结束

更多可查看: http://www.w3school.com.cn/jsref/dom_obj_audio.asp

4. 设置每个页面title

import Vue from 'vue'
import HelloWorld from '@/components/HelloWorld'
import Index from '../../static/Index'
import Router from 'vue-router'
Vue.use(Router)

const router = new Router({
  routes: [
    {path: '/', name: 'Index',meta:{title:'登陆'}, component: Index}

  ]
})
router.beforeEach((to, from, next) => {//beforeEach是router的钩子函数,在进入路由前执行
  if (to.meta.title) {//判断是否有标题
    document.title = to.meta.title
  }
  next()//执行进入路由,如果不写就不会进入目标页
})
export default router;

5. 路由守卫

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

6. directive

image.png

参数:


image.png

自定义指令,参见:https://cn.vuejs.org/v2/guide/custom-directive.html

7. jsx

参见:https://cn.vuejs.org/v2/guide/render-function.html

8. axios请求拦截

import axios from 'axios'
import router from './router';

// 请求拦截
axios.interceptors.request.use(
  config => {
    if(localStorage.wxToken) {
      config.headers.Authorization = localStorage.wxToken
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截
axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    const { status } = error.response
    if(status === 401) {
      alert('token过期,请重新登录')
      localStorage.removeItem('wxToken')
      router.push('/login')
    }
    // alert(error.response.data.)
    alert(error.response.data)
    return Promise.reject(error)
  }
)

export default axios

9. axios的封装

import {config} from '../config'
import axios from 'axios';
axios.defaults.withCredentials = true

const tips = {
    1: '抱歉,出现了一个错误',
    400: '请求错误',
    401: '未登录',
    404: '请求不存在',
    405: '禁止访问',
    451: '授权过期'
}
// # 解构
class HTTP{
    request({url,data={},method='GET'}){
        return new Promise((resolve, reject)=>{
            this._request(url,resolve,reject,data, method)
        })
    }
    _request(url,resolve, reject, data={}, method='GET'){
        let $HTTP;
        if(method === "GET") {
            $HTTP = axios.get(config.api_url + url, {
                params: data
            })
        } else if(method === "POST") {
            $HTTP = axios.post(config.api_url + url, data)
        }
        $HTTP.then((res) => {
            if(res.status==200 && !res.data.error) {
                resolve(res.data)
            }else{
                reject()
                const code = res.data.error.code
                const msg = res.data.error.message
                this._show_error(code, msg)
            }
        }).catch((err) => {
            reject()
            this._show_error(1)
        })
    }

    _show_error(code, msg){
        console.log(msg)
    }


}

export {HTTP}

10. keep-alive

组件缓存

11. vue-hooks

参考文档:https://github.com/yyx990803/vue-hooks

demo:https://mp.weixin.qq.com/s/p2f3jsko91iGhrbtjgmt7g?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350

推荐阅读更多精彩内容