Vue3（五）vuex4 & vue-router4

1. 创建router对象

// createRouter方法，用于创建路由器对象
// createWebHashHistory方法，用于生成hash模式的路由，路由地址中包含一个#
// createWebHistory方法，用于生成history模式的路由
import {createRouter,createWebHashHistory} from 'vue-router'

// 创建当前项目中的路由器对象
let router = createRouter({
    //定义路由模式
    history:createWebHashHistory(),
    //定义具体的路由信息
    routes:[
        //每一条路由信息，配置一个对象
        {
            path:'/',
            name:'home',
            component:()=>import('../views/Home.vue')
        },
        {
            path:'/store',
            name:'store',
            component:()=>import('../views/Store.vue')
        },
        {
            path:'/list/:id',
            props:true,
            name:'list',
            component:()=>import('../views/List.vue')
        },
        {
            path:'/news',
            name:'news',
            component:()=>import('../views/News.vue')
        },
        {
            path:'/page1',
            name:'page1',
            component:()=>import('../views/Page1.vue')
        },
        {
            // 注意：不可以写通配符*
            // path:'*',
            path:'/:pathMatch(.*)*',
            name:'error404',
            component:()=>import('../views/Error404.vue')
        }
    ]
})

export default router

2. 使用router

//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
})

3. 创建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

4. 使用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", "英国");
}

5. 注册

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