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

归然發表於 2020-11-6 10:56:00

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

在上一篇实战演练中，已经将项目搭建好，并介绍了 Router、Vuex 的基本用法
接下来会以一个 Todo List 项目来介绍实战中如何使用 Composition API
<img src="https://img2020.cnblogs.com/blog/1059788/202011/1059788-20201103162702271-998278366.gif" alt="" loading="lazy"> 
一、输入框与列表（按键别名 + computed 类型声明 ）
首先是输入框，由于需要支持回车键提交，所以需要监听 keydown 事件
<img src="https://img2020.cnblogs.com/blog/1059788/202011/1059788-20201103164353926-1967468094.png" alt="" width="255" height="139" loading="lazy">
如果是传统的按键处理，需要在事件对象中根据 keyCode 来判断按键
Vue 提供了一些常用的按键修饰符，不用在事件处理函数中再做判断
比如这里就使用了 enter 修饰符，直接监听 enter 键的 keydown 事件
<hr>
列表部分，需要判断当前列表是否为空，如果为空则展示空状态
<img src="https://img2020.cnblogs.com/blog/1059788/202011/1059788-20201103164936880-881567715.png" alt="" width="507" height="228" loading="lazy">
这里使用了 v-if 和 v-else 来做条件判断，而其判断条件 showList 是一个计算属性 computed
在 TypeScript 的项目中，如果像 JS 项目一样添加计算属性，无法进行类型推断
<img src="https://img2020.cnblogs.com/blog/1059788/202011/1059788-20201103165227639-1359821722.png" alt="" width="454" height="132" loading="lazy">
需要加上类型声明：
<img src="https://img2020.cnblogs.com/blog/1059788/202011/1059788-20201103165550373-123797037.png" alt="" width="450" height="119" loading="lazy">
// 在 setup() 中通过 computed() 注册的计算属性不需要声明类型
 
 
二、添加、删除条目（在 setup 中使用 vuex）
创建的条目需要保存到 store 中，首先需要定义条目类型
<img src="https://img2020.cnblogs.com/blog/1059788/202011/1059788-20201103170340802-1514352920.png" alt="" width="400" height="162" loading="lazy">
然后在 state 中新增 todoList 字段，用于保存列表
<img src="https://img2020.cnblogs.com/blog/1059788/202011/1059788-20201103170936360-901811615.png" alt="" width="401" height="164" loading="lazy">
这里还添加了一个 todoListMap 字段，是 todoList 的字典项，后面查找条目的时候会用到
同时在 mutations 中新增添加和删除方法
<img src="https://img2020.cnblogs.com/blog/1059788/202011/1059788-20201103170816154-2007618808.png" alt="" width="557" height="252" loading="lazy">
 
Store 已经调整好了，接下来只要在组件中调用即可
可以像之前介绍的那样，使用 mapState 和 mapMutations 来导出对应的字段和方法
不过如果想在 setup 中使用 vuex，就需要用到 vuex 4 提供的 useStore 方法
<div class="cnblogs_code">
<pre>import { useStore } from 'vuex';

export default {
//...
setup() {
const store = useStore();
console.log('store--->', store);
return { ...store.state }
}
}</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1059788/202011/1059788-20201104104652759-806009782.png" alt="" loading="lazy">
从截图可以看到，useStore() 的返回值其实就是 $store
接下来的事情就简单了，手动导出需要用到的 state 和 mutations、actions 即可
<img src="https://img2020.cnblogs.com/blog/1059788/202011/1059788-20201104111203992-866521725.png" alt="" width="520" height="351" loading="lazy">
这种方式导出 state 还行，但对于 mutation 和 action，需要一个一个手动创建函数并导出，就比较笨重
没关系，我们还有 mapMutations 和 mapActions 可以使用
<img src="https://img2020.cnblogs.com/blog/1059788/202011/1059788-20201104111823217-70311341.png" alt="" width="565" height="259" loading="lazy">
但需要注意，不要在 setup 使用 mapState！
因为 mapState 导出 state 是一个函数（computed），这个函数内部使用了 this.$store
而 setup 中 this 是一个空值，所以在 setup 中使用 mapState 会报错
<img src="https://img2020.cnblogs.com/blog/1059788/202011/1059788-20201104112145599-1085949315.png" alt="" loading="lazy">
 如果确实希望以 mapState 的形式在 setup 中导出 state，可以看一下 vuex-composition-helpers
<div class="cnblogs_code">
<pre>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
 }
}
}</pre>
</div>
 
 
三、查看条目详情（在 setup 中使用 router）
在条目详情页，可以在 url 上携带条目 id，然后通过 id 在 store 中找到对应的数据
这就需要调整路由配置文件 src/router/index.ts，配置 vue-router 中的动态路由
<img src="https://img2020.cnblogs.com/blog/1059788/202011/1059788-20201104114020709-986023880.png" alt="" width="666" height="115" loading="lazy">
路由配置好了，接下来需要在列表上添加“查看详情”按钮的处理函数 
如果这个函数写在 methods 里面，可以直接通过  this.$router.push() 来跳转页面
但是在 setup 中，就需要用到 vue-router 提供的 useRouter
<div class="cnblogs_code">
<pre>import { useRouter } from 'vue-router';

export default {
// ...
setup() {
const router = useRouter();
const viewItem = (id: string) => {
 router.push(`/about/${id}`);
};
return { viewItem };
}
}</pre>
</div>
然后在详情页，通过 useRoute（注意不是 userRouter ）获取 params
<img src="https://img2020.cnblogs.com/blog/1059788/202011/1059788-20201104114800544-1327336799.png" alt="" width="569" height="376" loading="lazy">
 
 
四、完全使用 Composition API 开发组件
以上都是在 setup 中使用 Composition API，整个组件本身依然是使用 Options API 开发
想象一下，如果整个组件的 <script> 部分就是一个 setup 函数，会发生什么呢？
给 <script> 标签加上 setup 修饰符试试！
<div class="cnblogs_code">
<pre><script lang="ts" setup>
// ...
</script></pre>
</div>
然后把整个 <script> 当做 setup 函数，改写上面的详情页
<img src="https://img2020.cnblogs.com/blog/1059788/202011/1059788-20201113110508685-2109359708.png" alt="" width="625" height="406" loading="lazy">
这样就能完全使用 Composition API 来开发组件了
和 setup 的区别在于，setup 最终需要 return 一个对象，而现在需要使用 export 来导出变量
如果需要使用 setup 函数的参数 ( props 和 context )，可以这么写：
<div class="cnblogs_code">
<pre><script lang="ts" setup="props, { emit }"></pre>
</div>
等效于
<div class="cnblogs_code">
<pre>setup(props, { emit }) {
// ...
}</pre>
</div>
最后再贴一份 script-setup 的组件示例：
<div class="cnblogs_code">
<pre><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: ,
disabled: Boolean,
},
emits: {
'update:modelValue': null,
},
});
</script></pre>
</div>
在这份代码中，我还是按照组件选项的方式，将变量分类放到一起
其实更合理的方式是按功能分类，这样更利于抽取逻辑
 
 
五、小结
Vuex 和 vue-router 都提供了可以在 setup 中获取实例的方法
这也侧面体现了 Vue 3 的 setup 是一个独立的钩子函数
它不会依赖于 Vue 组件实例，如果需要用到函数外部的变量，都需要从外部获取
同时也提醒我们在开发 Vue 3 的插件的时候，一定要提供相应的函数让开发者能在 setup 中使用
  
来源：https://www.cnblogs.com/wisewrong/p/13915331.html

頁: [1]

琼殿技术论坛's Archiver

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