p23 VueRouter路由的使用（下）

router-link的v-slot

在这里插入图片描述

router-view的v-slot

在这里插入图片描述

动态添加路由

在这里插入图片描述

路由导航守卫

在这里插入图片描述

Vuex的状态管理

在这里插入图片描述

p24

在这里插入图片描述

mapState

在这里插入图片描述

如何在setup中使用mapState

<template>
  <h2>{
   
   { sCounter }}</h2>
  <p>{
   
   { counter }}</p>
  <p>{
   
   { name }}</p>
  <p>{
   
   { age }}</p>
  <p>{
   
   { weight }}</p>
  <button @click="increment">+1</button>
  <button @click="decrement">-1</button>
</template>

<script>
import {
      
       mapState, useStore } from "vuex";
import {
      
       computed } from "vue";
export default {
      
      
  setup() {
      
      
    const store = useStore();
    const sCounter = computed(() => store.state.counter);

    const storeStateFns = mapState(["counter", "name", "age", "weight"]);

    const storeState = {
      
      };
    Object.keys(storeStateFns).forEach((fnKey) => {
      
      
      const fn = storeStateFns[fnKey].bind({
      
       $store: store });
      storeState[fnKey] = computed(fn);
    });
    return {
      
      
      sCounter,
      ...storeState,
    };
  },
};
</script>

封装

在这里插入图片描述
useState.js

import {
    
     computed } from 'vue'
import {
    
     mapState, useStore } from 'vuex'

export function useState(mapper) {
    
    
    // 拿到store
    const store = useStore()

    // 获取到对应的对象的functions: {name: function, age: funciton}
    const storeStateFns = mapState(mapper)

    // 对数据进行转换
    const storeState = {
    
    }
    Object.keys(storeStateFns).forEach((fnKey) => {
    
    
        const fn = storeStateFns[fnKey].bind({
    
     $store: store });
        storeState[fnKey] = computed(fn);
    });

    return storeState
}

App.vue

<template>
  <p>{
   
   { counter }}</p>
  <p>{
   
   { name }}</p>
  <p>{
   
   { age }}</p>
</template>

<script>
import {
      
       useState } from "./hooks/useState";
export default {
      
      
  setup() {
      
      
    const storeState = useState(["counter", "name", "age"]);
    return {
      
      
      ...storeState,
    };
  },
};
</script>