Vue3.x 从零开始（六）—— Router + Vuex + TypeScript 实战演练（下） / 四六文摘

在上一篇实战演练中，已经将项目搭建好，并介绍了 Router、Vuex 的基本用法

接下来会以一个 Todo List 项目来介绍实战中如何使用 Composition API

一、输入框与列表（按键别名 + computed 类型声明）

首先是输入框，由于需要支持回车键提交，所以需要监听 keydown 事件

如果是传统的按键处理，需要在事件对象中根据 keyCode 来判断按键

Vue 提供了一些常用的按键修饰符，不用在事件处理函数中再做判断

比如这里就使用了 enter 修饰符，直接监听 enter 键的 keydown 事件

列表部分，需要判断当前列表是否为空，如果为空则展示空状态

这里使用了 v-if 和 v-else 来做条件判断，而其判断条件 showList 是一个计算属性 computed

在 TypeScript 的项目中，如果像 JS 项目一样添加计算属性，无法进行类型推断

需要加上类型声明：

// 在 setup() 中通过 computed() 注册的计算属性不需要声明类型

二、添加、删除条目（在 setup 中使用 vuex）

创建的条目需要保存到 store 中，首先需要定义条目类型

然后在 state 中新增 todoList 字段，用于保存列表

这里还添加了一个 todoListMap 字段，是 todoList 的字典项，后面查找条目的时候会用到

同时在 mutations 中新增添加和删除方法

Store 已经调整好了，接下来只要在组件中调用即可

可以像之前介绍的那样，使用 mapState 和 mapMutations 来导出对应的字段和方法

不过如果想在 setup 中使用 vuex，就需要用到 vuex 4 提供的 useStore 方法

import { useStore } from 'vuex';

export default {
  //...
  setup() {
    const store = useStore();
    console.log('store--->', store);
    return { ...store.state }
  }
}

从截图可以看到，useStore() 的返回值其实就是 $store

接下来的事情就简单了，手动导出需要用到的 state 和 mutations、actions 即可

这种方式导出 state 还行，但对于 mutation 和 action，需要一个一个手动创建函数并导出，就比较笨重

没关系，我们还有 mapMutations 和 mapActions 可以使用

但需要注意，不要在 setup 使用 mapState！

因为 mapState 导出 state 是一个函数（computed），这个函数内部使用了 this.$store

而 setup 中 this 是一个空值，所以在 setup 中使用 mapState 会报错

如果确实希望以 mapState 的形式在 setup 中导出 state，可以看一下 vuex-composition-helpers

import { useState, useActions } from 'vuex-composition-helpers';

export default {
    props: {
        articleId: String
    },
    setup(props) {
        const { fetch } = useActions(['fetch']);
        const { article, comments } = useState(['article', 'comments']);
        fetch(props.articleId); // dispatch the "fetch" action

        return {
            // both are computed compositions for to the store
            article,
            comments
        }
    }
}

三、查看条目详情（在 setup 中使用 router）

在条目详情页，可以在 url 上携带条目 id，然后通过 id 在 store 中找到对应的数据

这就需要调整路由配置文件 src/router/index.ts，配置 vue-router 中的动态路由

路由配置好了，接下来需要在列表上添加“查看详情”按钮的处理函数

如果这个函数写在 methods 里面，可以直接通过 this.$router.push() 来跳转页面

但是在 setup 中，就需要用到 vue-router 提供的 useRouter

import { useRouter } from 'vue-router';

export default {
  // ...
  setup() {
    const router = useRouter();
    const viewItem = (id: string) => {
      router.push(`/about/${id}`);
    };
    return { viewItem };
  }
}

然后在详情页，通过 useRoute（注意不是 userRouter ）获取 params

四、完全使用 Composition API 开发组件

以上都是在 setup 中使用 Composition API，整个组件本身依然是使用 Options API 开发

想象一下，如果整个组件的 <script> 部分就是一个 setup 函数，会发生什么呢？

给 <script> 标签加上 setup 修饰符试试！

<script lang="ts" setup>
// ...
</script>

然后把整个 <script> 当做 setup 函数，改写上面的详情页

这样就能完全使用 Composition API 来开发组件了

和 setup 的区别在于，setup 最终需要 return 一个对象，而现在需要使用 export 来导出变量

如果需要使用 setup 函数的参数 ( props 和 context )，可以这么写：

<script lang="ts" setup="props, { emit }">

等效于

setup(props, { emit }) {
  // ...
}

最后再贴一份 script-setup 的组件示例：

<script lang="ts" setup="props, { emit }">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  toRefs,
} from 'vue';

const { modelValue, disabled } = toRefs(props);

/* data */
export const currentValue = ref('');
export const isComposing = ref(false);

/* methods */
export function handleInput() {
  if (isComposing.value) return;
  emit('update:modelValue', currentValue.value);
}

/* lifecycle */
onMounted(() => {
  currentValue.value = modelValue.value;
});

/* computed */
export const inputDisabled = computed(() => disabled.value);

export default defineComponent({
  name: 'test-input',
  props: {
    modelValue: [String, Number],
    disabled: Boolean,
  },
  emits: {
    'update:modelValue': null,
  },
});
</script>

在这份代码中，我还是按照组件选项的方式，将变量分类放到一起

其实更合理的方式是按功能分类，这样更利于抽取逻辑

五、小结

Vuex 和 vue-router 都提供了可以在 setup 中获取实例的方法

这也侧面体现了 Vue 3 的 setup 是一个独立的钩子函数

它不会依赖于 Vue 组件实例，如果需要用到函数外部的变量，都需要从外部获取

同时也提醒我们在开发 Vue 3 的插件的时候，一定要提供相应的函数让开发者能在 setup 中使用

Vue3.x 从零开始（六）—— Router + Vuex + TypeScript 实战演练（下）

相关推荐