vuex4 & vue-router4

1、安装vue3路由

npm install vue-router@4

在入口文件main.js导入router

// 导入当前项目中的路由器对象
import router from './router'
// mount()方法，用于将实例挂载到指定的容器
// use()方法，用于给实例安装插件
createApp(App).use(router).mount('#app')

创建router对象

createRouter()用于创建路由器对象
createWebHistory()方法，用于返回history模式路由
createWebHashHistory()方法，用于返回hash模式路由路由地址包含一个#号

import {createRouter,createWebHashHistory} from 'vue-router'

// 创建一个路由器对象
let router = createRouter({
    //设置路由模式（注意：这里跟vue-router3不一样）
    history:createWebHashHistory(),
    //配置具体的路由信息
    routes:[
        //每一个具体的路由信息，需要配置一个单独的对象
        {
            //配置路由地址
            path:'/',
            //设置路由名称
            name:'Home',
            //设置路由页面
            component:()=>import('../views/Home.vue')
        },
        {
            path:'/home',
            //重定向
            redirect:'/'
        },
        {
            path:'/list',
            name:'List',
            component:()=>import('../views/List.vue')
        },
                                                                                                                            
                                                                            {
            // 注意：不可以写通配符*
            // path:'*',
            path:'/:pathMatch(.*)*',
            name:'Error404',
            component:()=>import('../views/Error404.vue')
        }
)}

导出路由

export default router

<router-link to="/">首页</router-link> | 
<router-link to="/list">列表</router-link> 
<!-- 使用路由视图组件，展示路由页面 -->
<router-view></router-view>

使用路由

//useRouter方法，返回当前项目中的路由器对象
//useRoute方法，返回当前路由信息对象
import {useRouter,useRoute} from 'vue-router'
//返回当前项目中的路由器对象
let $router = useRouter()
//获取当前路由信息
let $route = useRoute()
//通过props，也能获取都路由参数
props:['id']
//监听路由参数id
watch(()=>$route.params.id,(nval)=>{
    //清空数组
    showList.splice(0)
    //向数组中添加最新的数据
    showList.push(...list.filter(r=>r.typeId==$route.params.id))
},{
    //一上来，先执行一次
    immediate:true
})

2、安装vuex

npm install vuex@next --save

导入

// 导入当前项目中的全局状态管理对象
import store from './store'

创建store对象

// 从vuex中导入createStore方法，该方法，用于创建全局状态管理对象
import { createStore } from 'vuex'
// 导入汽车模块
import car from './modules/car.js'
// 创建一个全局状态管理对象
let store = createStore({
    //定义状态
    state:{
        firstName:'张',
        lastName:'三'
    },
    //定义围绕状态的计算属性
    getters:{
        fullName(state){
            return state.firstName+'.'+state.lastName
        }
    },
    //定义同步方法
    mutations:{
        updateFirstName(state,val){
            state.firstName = val
        },
        updateLastName(state,val){
            state.lastName = val
        }
    },
    //定义异步方法
    actions:{
        updateFirstName(store,val){
            setTimeout(() => {
                store.commit('updateFirstName',val)
            }, 1000);
        },
        updateLastName(store,val){
            setTimeout(() => {
                store.commit('updateLastName',val)
            }, 1000);
        }
    },
    //模块
    modules:{
       car
    }
})

//导出全局状态管理对象
export default store

使用store

//useStore方法，返回当前项目中的全局状态管理对象
import { useStore } from "vuex";
// 获取全局状态管理对象
let $store = useStore();
let firstName = computed(() => {
    return $store.state.firstName;
});
let lastName = computed(() => {
    return $store.state.lastName;
});
let fullName = computed(() => {
    return $store.getters.fullName;
});
let carName = computed(() => {
    return $store.state.car.carName;
});
let address = computed(() => {
    return $store.state.car.address;
});
let carInfo = computed(() => {
    return $store.getters["car/carInfo"];
});
function updateFirstName() {
    //调用mutations里面的方法，修改姓
    $store.commit("updateFirstName", "李");
}
function updateLastName() {
    //调用actions里面的方法，修改名
    $store.dispatch("updateLastName", "四");
}
function updateCarName() {
    //调用mutations里面的方法，修改车名
    $store.commit("car/updateCarName", "宾利");
}
function updateCarAddress() {
    //调用actions里面的方法，修改地址
    $store.dispatch("car/updateCarAddress", "英国");
}

注册

// 导入当前项目中创建的全局状态管理对象
import store from './store'
// 导入当前项目中创建的路由器对象
import router from './router'
// 使用createApp方法创建一个Vue实例，该方法的参数是App组件，表示渲染App组件
// use方法，用于给当前vue实例添加功能
// mount方法，用于将渲染后的内容，挂载到指定的容器中
createApp(App).use(store).use(router).mount('#app')