vue3 快速上手（第二篇）

vue-router集成

1.安装vue-router yarn add vue-router 导入

2.创建配置路由 导出

3.在main.js 中导入配置好的路由router 创建 使用 挂载

// App.vue中使用
import {
  createRouter,
  createWebHashHistory,
} from 'vue-router'

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

组件中使用route与router

route 获取路由参数

router 获取路由对象

1. 获取路由参数 const route = userRoute()
2. 获取路由对象const router = useRouter()

注意： 使用useRouter()和useRoute()的时候要先从vue-router中导包

// 通过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>

// 通过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

3.将store应用到应用app中

1. 在main.js中导入store
2. app.use(store)

import { createStore } from "vuex";

const store =createStore({
    state:()=>{
        return {
            appName:'heima'
        }
    },
    mutations:{

    },
    actions:{

    },
    modules:{

    }
});

export default store;

pinia集成

1. 安装依赖 yarn add pinia or npm i pinia;
2. 在main.js中创建pinia const pinia = createPinia()；
3. 将创建好的pinia应用到app中；
4. 定义store;

// 创建单个store的步骤
1. 创建store/user.js
// 定义store defineStore 第一个值是id 唯一标识
2. const userStore = defineStore("storeId"，{
		state:()=>{return {}},
		actions:{},
		getters:{}	
})；
// 配置对象有state，getters, actions
3. 导出userStore

actions的使用

在pinia中没有mutations，只有actions，不管是同步还是异步的操作，都可以在actions中定义。

1. 在actions中定义方法
2. 操作数据
3. 在视图template中使用方法

// 在userSotre的actions中提供方法并且修改数据
import { defineStore } from "pinia";
const useUserStore = defineStore('userStore', {
    state: () => {
        return {
            userName: 'heihei',
            age: 18
        }
    },
    actions: {
        increment() {
            this.age++
        },
        incrementAsync() {

            setTimeout(() => {
                this.age++

            }, 1000)
        }
    },
    getters: {

    }
})
export default useUserStore;

// 在Home组件中使用
<script setup>
import { useRoute } from 'vue-router';
import useUserStore from '../store/uerStore';

    const userStore = useUserStore();

</script>
<template>
    Home
    {{userStore.age}}
    <button @click="userStore.increment">+1</button>
    <button @click="userStore.incrementAsync">异步+1</button>
</template>

getters的使用

pinia中的getters和vuex中的基本是一样的，计算state的状态值。

1. 在getters 中计算方法
2. getters中的方法直接操作数据（this.数据名）
3. 在template中使用 （store的变量名.方法名）

// 在getters中提供计算属性
import { defineStore } from 'pinia'
// 1. 创建store
// 参数1：store的唯一表示
// 参数2：对象，可以提供state actions getters
const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
  getters: {
    double() {
      return this.count * 2
    },
  },
  actions: {
    increment() {
      this.count++
    },
    incrementAsync() {
      setTimeout(() => {
        this.count++
      }, 1000)
    },
  },
})
export default useCounterStore

// 在组件中使用
<h1>根组件---{{ counter.count }}</h1>
<h3>{{ counter.double }}</h3>

storeToRefs的使用

如果直接从pinia中解构数据，会丢失响应式， 使用storeToRefs可以保证解构出来的数据也是响应式的

import useAccountStore from '../store/account';
import useUserStore from '../store/uerStore';

const userStore = useUserStore();

const { age} = storeToRefs(userStore);

</script>
<template>
    Home
    <div>{{age}}</div>
    {{ userStore.age }} ---{{ userStore.descAge }}
    <button @click="userStore.increment">+1</button>
    <button @click="userStore.incrementAsync">-1</button>
</template>

pinia模块化

在复杂项目中，不可能把多个模块的数据都定义到一个store中，一般来说会一个模块对应一个store，最后通过一个根store进行整合

1. 创建store/index文件；
2. 在index.js中将给store导入；
3. 添加统一导出useStore方法

// 新建store/user.js文件
import { defineStore } from 'pinia'

const useUserStore = defineStore('user', {
  state: () => {
    return {
      name: 'zs',
      age: 100,
    }
  },
})
export default useUserStore

// 新建store/index.js
import useUserStore from './user'
import useCounterStore from './counter'

// 统一导出useStore方法
export default function useStore() {
  return {
    user: useUserStore(),
    counter: useCounterStore(),
  }
}

// 在组件中使用
<script setup>
import { storeToRefs } from 'pinia'
import useStore from './store'
const { counter } = useStore()

// 使用storeToRefs可以保证解构出来的数据也是响应式的
const { count, double } = storeToRefs(counter)
</script>