HOME
HOME
文章目录
  1. 1. vue-router
  2. 2. promise
  3. 3. vuex

vue2学习笔记3

2021.01.28 le31ei Program  热度 ℃

1. vue-router

  1. 创建路由组件
  2. 配置路由映射: 组件和路径映射关系
  3. 使用路由: 通过<router-link>和<router-view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "@/components/Home";
import About from "@/components/About";


Vue.use(VueRouter)

const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
]

const router = new VueRouter({
  routes,
  mode: 'history'
})
export default router

路由模式更换

默认格式：http://localhost:8080/#/home

history模式: http://localhost:8080/home

1
2
3
4
const router = new VueRouter({
  routes,
  mode: 'history'
})

router-link属性

  1. tag属性：可以指定<router-link>渲染成什么组件，比如<li>
  2. to属性：跳转到某个url
  3. replace属性：替换模式，不能使用浏览器前进后退按钮
  4. Active-class属性：选中的router-link有router-link-active的class属性，将router-link-active更名

代码跳转路由

this.$router.push('/home')

this.$router.replace('/home')

动态路由

获取路由参数：this.$route.params.id

1
2
3
4
5
6
const routes = [
  {
    path: '/user/:id',
    component: User
  }
]

懒加载

当用户访问到路由的时候才加载响应的组件，更加高效

1
2
3
4
{
  path: '/home',
  component: () => import('../components/Home')
},

路由嵌套

  1. 创建对应子组件，并在路由上配置对应的子路由
  2. 在组件内部使用<router-view>标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  path: '/home',
  component: () => import('../components/Home'),
  children: [
    {
      path: 'news',
      component: HomeNews
    },
    {
      path: 'message',
      component: HomeMessage
    }
  ]
},
  // 在父组件中要加上<router-view>
   <router-link to="/home/news">新闻</router-link>
<router-link to="/home/message">消息</router-link>
<router-view></router-view>

参数传递

query方式:profile?id=1：

<router-link :to="{path: '/profile', query: {id: '1'}}">Profile</router-link>

js方式：

1
2
3
4
5
6
this.$router.push({
  path: 'profile',
  query: {
    name: '1'
  }
})

取值方式：this.$router.query.id

路径方式：

<router-link :to="/user/+userid">用户</router-link>

js方式：

this.$router.push('/profile'+ this.userid)

导航守卫

title更换为对应页面的title

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// routes
      {
        path: 'message',
        component: HomeMessage,
        meta:{
          title: 'message'
        }
        
        
        
router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
})

2. promise

异步编程解决方案

promise本身是一个类，传入的箭头函数参数resolve和reject也是两个函数，成功的时候调用resolve，失败的时候调用reject，

成功的处理代码写在then中，失败的代码写在catch中

1
2
3
4
5
6
7
8
9
10
11
12
new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('请求')
        //resolve()    //调用resolve直接跳到.then()
        reject()     //调用reject，直接调到catch()
    }, 1000)
}).then(() => {    // then可以直接传入两个函数，而省略掉catch
    console.log('success')

}).catch(() => {
    console.log('failed')
})

三种状态

pending：等待状态，比如正在进行网络请求，或者定时器没有到指定时间

Fulfill: 满足状态，比如主动调用了resolve，就处于该状态，并且回调.then()

reject: 拒绝状态，当我们主动回调了reject时，就处于该状态，并且回调.catch()

链式调用

promise可以直接省略

1
2
3
4
5
6
7
8
9
10
11
12
13
new Promise((resolve, reject) => {
    setTimeout(()=> {
        resolve('aaa')
    }, 1000)
}).then(res => {
    console.log(res)
    return Promise.resolve(res+ '222')
}).then(res => {
    console.log(res)
    return res+'3333'  // 省略promise的resolve，直接调用then对结果进行处理
}).then(res => {
    console.log(res)
})

等待同步请求: promise.all

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Promise.all([
    new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('请求1')
        }, 1000)
    }),
    new Promise((resolve, reject) => {
        setTimeout(() => {
            //resolve('请求2')
            reject('请求2失败')
        }, 2000)
    })
]).then(results => {
    console.log(results[0])
    console.log(results[1])
}).catch(err => {
    console.log(err)
})

3. vuex

状态管理模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {  // 定义要存放的数据
    counter: 1000
  },
  mutations: {  // 定义要怎么修改state的方法
    increament(state){
      state.counter ++
    },
    decreament(state){
      state.counter --
    }
  },
  actions: {

  },
  getters: {

  },
  modules: {

  }
})

export default store

调用的时候需要通过commit进行调用

1
2
3
this.$store.commit('increament', )
// commit传值
this.$store.commit('increament', 5)

state

单一状态树，全部状体放在一个store里面

getters

对state的数据进行变形后输出，类似于计算属性

调用方法：

$store.getters.doubleCounter

1
2
3
4
5
getters: {
  doubleCounter(state, getters){
    return state.counter * state.counter
  }
},

响应式操作state

1
2
Vue.set(state.info, 'age', 40)
Vue.delete(state.info, 'age')

mutations

只能存放同步操作，不能使用异步操作，存在异步操作使用actions

actions

存放异步操作，但是只能调用mutations里面的同步函数，对state进行操作

1
2
3
4
5
6
7
actions: {
  aUpdateInfo(context){
    setTimeout(() => {
      context.commit('updateInfo')
    }, 1000)
  }
},

调用方法：this.$store.dispatch('aUpdateInfo')

modules

对state中的数据进行分模块

1
2
3
4
5
6
7
8
modules: {
  a: {
    actions: {},
    mutations: {},
    getters: {},
    state: {}
  }
}