vue3-router集成，vuex4的集成

vue生态的变化

1. Vue-router 从v3升到v4;
2. Vuex 从v3升到v4;
3. 虽然在vue3中可以使用vuex4，但是官方推荐默认的状态管理库是Pinia.
   vue@2 + vue-router@3 + vuex@3 options api
   vue@3 + vue-router@4 + vuex@4 composition api

vue-router集成

1. 安装vue-router yarn add vue-router@4 | npm install vue-router@4;

2. 创建并配置路由
   2.1 创建文件router/index.js
   2.3 在index.js中创建并配置路由const mainRouter = createRouter({history:‘路由模式’,路由规则表})
   常见路由模式 createWebHashHistory() url带# ,createWebHistory（）url不带#，需要 服务器支持
   2.4 导出路由 export default routers;
   注意： 在使用createRouter、createWebHistory 、createWebHashHistory时候要先从vue-router中导包。

3. 在main.js 中使用路由 const app = createApp(根组件).use(路由).mount(容器)
   3.1 导入配置好的路由router；
   3.2 创建app, const app = createApp(根组件).;
   3.3使用router, app.use(router);
   3.4 将app挂载到容器中app.mount(‘#app’)

4. 在根组件App中添加路由出口,匹配到的路由将会渲染在这里

5. 以在根组件App中添加路由导航 (可选项

代码演示

(1)创建组件Home.vue和Login.vue
(2)创建文件router/index.js

import { createRouter, createWebHashHistory } from "vue-router";

// 创建路由
const routers = createRouter({
  // 创建history模式的路由
  // history ：createWebHistory（）
  // 创建history模式的路由
  history:createWebHashHistory(),
  // 配置路由规则
  routes:[
    {
      path:'/home',
      component:import('../pages/Home.vue')
    },
    {
      path:'/login',
      component:import('../pages/Login.vue')
    }
  ]
})

export default routers

（3）在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

(4)App.vue中使用

<template>
  <ul>
    <li>
      <router-link to="/home">首页</router-link>
    </li>
    <li>
      <router-link to="/login">登陆</router-link>
    </li>
  </ul>

  <!-- 路由出口 -->
  <router-view></router-view>
</template>

总结

使用vue-route需要4步，

1. 安装依赖，
2. 创建并配置路由const router = createRouter(配置对象)，
3. 应用中使用路由app.use(路由)
4. 在组件中配置路由入口

组件中使用route与router

作用：
route 获取路由参数
router 获取路由对象

Vue2 中

this.$router
this.$route

由于组件中无法访问this,因为无法访问this.$route与this.$router

Vue3中

1. 获取路由参数 const route = userRoute()
2. 获取路由对象const router = useRouter()
   注意： 使用useRouter()和useRoute()的时候要先从vue-router中导包

实例代码

（1）通过useRoute()可以获取route信息

<script setup>
import { useRoute, useRouter } from "vue-router"

    const route = useRoute();
    const router = useRouter();

    const getParams = ()=>{
        console.log('getParams fullPath',route.fullPath);
        console.log('getParams params',route.params);
        console.log('getParams path',route.path);
        console.log('getParmas query',route.query);
    }
</script>
<template>
    Home
    <button @click="getParams">获取url参数</button>
</template>

（2）通过useRouter()可以获取router信息

<script>
import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const login = () => {
      router.push('/home')
    }
    return {
      login,
    }
  },
}
</script>

vuex4的集成

1. 安装依赖包 yarn add vuex
2. 创建store
   1. 创建store/index.js；
   2. 在index.js 中创建store const store = createStore(配置对象)
   3. 导出store;
3. 将store应用到应用app中
   1. 在main.js中导入store
   2. app.use(store)

实例代码
（2）创建store/index.js

import { createStore } from "vuex";
const store = createStore({
  state:()=>{
   return{
    uesrName:'千玺',
    money:1000
   }
  },
  mutations:{
    add:()=>{
      store.state.money++
    }
  },
  actions:{
    addAsync:()=>{
      setTimeout(()=>{
      store.commit('add')
      },1000)
    }
  },
  getters:{},
})
export default store

（3）将store应用到应用app中

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'
import routers from './router/index'
import store from './store'  // 他

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.use(routers)
app.use(store)  //他
app.mount('#app')

vuex4在vue3中的使用

1. 使用方法与vue2中一致
2. 组件中获取store的方式变成了const store = useStore()

注意：vue3中没有辅助函数mapState mapMutations mapActions mapGetters