VUE3基础

一、vue-router v4.x

介绍 | Vue Router

1、安装

yarn add vue-router@next

@next代表最新的版本

2、路由配置

在src目录下，新建router/index.ts，具体配置如下

import {RouteRecordRaw,createRouter,createWebHashHistory} from 'vue-router'
const routes:Array = [
    {
        path: '/login',
        component: () => import('../views/Login.vue')
    },
    {
        path: '/register',
        component: () => import('../views/Register.vue')
    },
    {
        path: '/',
        component: () => import('../views/Home.vue')
    }
]
const router=createRouter({
    routes,
    history:createWebHashHistory()
})
export default router

必须在main.ts引入后挂载

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
​
const app=createApp(App)
app.use(router)
app.mount('#app')

3、路由跳转

路由跳转有两种方式

• router-link，超链接的方式来跳转

• 通过useRouter这个hook来进行跳转

​

4、路由传参

4.1、params参数

• 配置

const routes:Array=[
    {
        path:'/newsDetail/:id',
        component:()=>import('../views/NewsDetail.vue')
    }
]

• 传参

• 接收参数

4.2、query参数

• 配置

const routes:Array=[
    {
        path:'/newsDetail',
        component:()=>import('../views/NewsDetail.vue')
    }
]

• 传参

  方式一：使用标签形式进行跳转并且使用?的方式进行传递参数

首页

方式二：使用router.push方式进行跳转并且使用query属性方式进行传参

• 接收参数

二、vuex v4.x

官网地址:开始 | Vuex

1、安装

yarn add vuex@next

2、配置

• 在src/store/index.ts创建store实例

import {createStore} from 'vuex'
const store=createStore({
    state(){
        return{
            count:0
        }
    }
})
export default store

• 在main.js中挂载store

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app=createApp(App)
app.use(store)
app.mount('#app')

3、State

4、Mutation

Counter.vue组件

store/index.js

import {createStore} from 'vuex'
interface State{
    count:number
}
const store=createStore({
    state(){
        return{
            count:0
        }
    },
    mutations:{
        increment(state:State){
            state.count++
        }
    }
})
export default store

5、actions

触发action异步任务时携带参数

import {createStore} from 'vuex'
const store=createStore({
    state(){
        return{
            count:1
        }
    },
    mutations:{
        increment(state:State,n:number){
            state.count+=n
        }
    },
    actions:{
        incrementAsync(context:ActionContext,n:number){
           setTimeout(() => {
            context.commit('increment',n)
           }, 2000);
        }
    }
})
export default store

组件中使用store.dispatch()派发异步任务

import {useStore} from 'vuex'
export default {
    setup(){
      const store=useStore()
      const increment=()=>{
        store.dispatch('incrementAsync',3)
      }
      return {store,increment}
    }
}

6、vuex模块化

6.1、创建modules目录

可以根据项目中数据的分类，来将仓库拆分成多个模块。通常我们会在src/store目录中，创建一个modules目录，用来存放所有的模块文件。

6.2、配置模块

每一个仓库模块中，都需要暴露一个对象出去，同时，需要设置一个属性

import {ActionContext} from 'vuex'
interface State{
    count:number
}
export default{
    namespaced:true,
    state(){
        return{
            count:1
        }
    },
    mutations:{
        increment(state:State,n:number){
            state.count+=n
        }
    },
    actions:{
        incrementAsync(context:ActionContext,n:number){
           setTimeout(() => {
            context.commit('increment',n)
           }, 2000);
        }
    }
}

6.3、引入模块

模块配置完成之后，需要在主仓库src/store/index.js文件中引入模块

import {createStore} from 'vuex'
import counter from './modules/counter'
const store=createStore({
   state(){
   },
   mutations:{
   },
   actions:{
   },
   modules:{
    counter
   }
})
export default store

6.4、组件操作模块

6.5、辅助函数方式

三、pinia

1、概念

官网地址：Pinia | The intuitive store for Vue.js

Pinia 是 Vue 的存储库，它允许跨组件/页面共享状态。实际上，pinia就是Vuex的升级版，官网也说过，为了尊重原作者，所以取名pinia，而没有取名Vuex，所以大家可以直接将pinia比作为Vue3的Vuex

2、为什么要使用pinia

• pinia中只有state、getter、action，抛弃了Vuex中的Mutation，Vuex中mutation一直都不太受小伙伴们的待见，pinia直接抛弃它了，这无疑减少了我们工作量。

• pinia中action支持同步和异步，Vuex不支持

• 良好的Typescript支持，毕竟我们Vue3都推荐使用TS来编写，这个时候使用pinia就非常合适了

• pinia分模块不需要modules

• 体积非常小，只有1KB左右。

3、安装和配置

在终端执行如下命令进行安装

yarn add pinia

在src/main.ts中引入

import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'
const pinia=createPinia()
const app=createApp(App)
app.use(pinia)
app.mount('#app')

4、快速入门

• 在src/store/counter.ts定义store

import {defineStore} from 'pinia'
const useCounterStore =defineStore('counter',{
    state:()=>{
        return{
            count:0
        }
    },
    getters:{
        doubleCount:state=>state.count*2
    },
    actions:{
        increment(){
            this.count++
        }
    }
})
export default useCounterStore

• 在组件中使用操作store

5、使用

import {defineStore} from 'pinia'

interface IState{
    name:string,
    age:number,
    job:string
}

const useUsersStore=defineStore('users',{
    state:():IState=>{
        return{
            name:'张三丰',
            age: 120,
            job: '掌门'
        }
    },
    getters:{
        getName:(state):string=>state.name,
        getAge:(state):number=>state.age,
        getJob:(state):string=>state.job,
        getUserInfo:(state):string=>`姓名：${state.name}\t年龄：${state.age}\t职业：{state.job}`
    },
    actions:{
        modifyUserInfo(name:string,age:number,job:string){
            this.name=name
            this.age=age
            this.job=job
        }
    }
})
export default useUsersStore

组件中使用store

6、持久化

• 下载安装

yarn add pinia-plugin-persist

• 修改之前的目录结构

在src/store/index.ts

import {createPinia} from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store=createPinia()
store.use(piniaPluginPersist)
export default store

修改main.ts文件

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app=createApp(App)
app.use(store)
app.mount('#app')

• 在相应的模块中开启持久化

import {defineStore} from 'pinia'
const useUsersStore=defineStore('users',{
    state:():=>{
    },
    getters:{
    },
    actions:{
    },
    persist:{
        enabled:true
    }
})
export default useUsersStore

默认情况下，pinia持久化的数据存储在sessionStorage中，如果要存储到localStorage中，设置如下

• 设置到localstorage中

import {defineStore} from 'pinia'
const useUsersStore=defineStore('users',{
    state:():=>{
    },
    getters:{
    },
    actions:{
    },
    persist:{
        enabled:true,
        strategies:[
            {
                key:'my_user',
                storage:localStorage
            }
        ]
    }
})
export default useUsersStore

默认所有的state都会进行缓存，你能够通过paths指定要持久化的字段，其余的则不持久化

import {defineStore} from 'pinia'
const useUsersStore=defineStore('users',{
    state:():=>{
    },
    getters:{
    },
    actions:{
    },
    persist:{
        enabled:true,
        strategies:[
            {
                key:'my_user',
                storage:localStorage,
                paths:['name','job']
            }
        ]
    }
})
export default useUsersStore