如何使用 FP 風格開發 Vue ?
栏目: JavaScript · 发布时间: 5年前
内容简介:Vue 若要使用 OOP 風格開發,可以使用 Class Component,還可搭配 TypeScript,Vue CLI 預設已經整好環境。Vue 原本風格,介於 OOP 與 FP 之間,沒使用 class,但卻大量使用Vue 2.5.17Vuex 3.0.1
Vue 若要使用 OOP 風格開發,可以使用 Class Component,還可搭配 TypeScript,Vue CLI 預設已經整好環境。Vue 原本風格,介於 OOP 與 FP 之間,沒使用 class,但卻大量使用 this
,這仍是 OOP 產物,若要更具 FP 風格,可以參考本文的方法。
Version
Vue 2.5.17
Vuex 3.0.1
Vue CLI 3.2.1
Component
<template> <div> <ul> <li v-for="(item, index) in todos" :key="index"> {{ item.id }} : {{ item.title }} </li> </ul> </div> </template> <script> import axios from 'axios'; const url = 'https://jsonplaceholder.typicode.com/todos'; const mounted = function() { axios.get(url) .then(res => this.todos = res.data.slice(0, 3)); }; export default { name: 'HelloWorld', data: () => ({ todos: [], }), mounted, }; </script>
16 行
const mounted = function() { axios.get(url) .then(res => this.todos = res.data.slice(0, 3)); };
因為 mouted()
要使用 this.todos
,所以只能使用 Anonymous Function。
then()
之後可放心使用 Arrow Function,因為 Arrow Function 沒有自己的 this
,而是 parent scope 的 this
,也就是 mounted()
的 this
,因此沒有問題。
但實務上 then()
之後可能不只一行,可能會想抽出獨立的 function。
<template> <div> <ul> <li v-for="(item, index) in todos" :key="index"> {{ item.id }} : {{ item.title }} </li> </ul> </div> </template> <script> import axios from 'axios'; const url = 'https://jsonplaceholder.typicode.com/todos'; const saveTodos = vm => res => vm.todos = res.data.slice(0, 3); const mounted = function() { axios.get(url) .then(saveTodos(this)); }; export default { name: 'HelloWorld', data: () => ({ todos: [], }), mounted, }; </script>
16 行
const saveTodos = vm => res => vm.todos = res.data.slice(0, 3); const mounted = function() { axios.get(url) .then(saveTodos(this)); };
為了希望抽出來的 saveTodos()
為 Arrow Function,也就是想徹底擺脫 this
,因此將 saveTodos()
改為 Higher Order Function,將 this
傳入為 vm
,如此就能將 this
全部改成 vm
,徹底擺脫 this
。
若想在 Vue 在 component 寫法更 FP,應盡量使用 function,至於要使用 Anonymous Function 或 Arrow Function,取決於 3 個原則:
this this this
也就是盡量使用 Arrow Function,除非要使用 this
。
Vuex
import Vue from 'vue'; import Vuex from 'vuex'; import axios from 'axios'; Vue.use(Vuex); const url = 'https://jsonplaceholder.typicode.com/todos'; const setTodos = (state, payload) => state.todos = payload; const saveTodos = commit => ({ data }) => commit('setTodos', data.slice(0, 3)); const getTodos = ({ commit }) => axios.get(url).then(saveTodos(commit)); export default new Vuex.Store({ state: { todos: [], }, mutations: { setTodos, }, actions: { getTodos, }, });
若 data 是放在 Vuex 的 store,則有另一番氣象。
第 9 行
const setTodos = (state, payload) => state.todos = payload;
Mutation 因為完全沒用到 this
,可安心使用 Arrow Function。
13 行
const getTodos = ({ commit }) => axios.get(url).then(saveTodos(commit));
Action 也因為完全沒用到 this
,可安心使用 Arrow Function。
11 行
const saveTodos = commit => ({ data }) => commit('setTodos', data.slice(0, 3));
至於 then()
的部分,也因為沒用到 this
,使用 Arrow Function 完全沒問題。
在 Vuex 可大膽全部使用 Arrow Function,因為沒有 this
後顧之憂,並可搭配 Destructuring Assignment
Conclusion
-
若要更接近 FP 風格,Vue 可全部使用 function,無論是
computed
、method
、watch
…,其本質都是 function,唯若要存取 Vue Instance 的 property,也就是要使用this
時,就要使用 Anonymous Function,不能使用 Arrow Function,其餘之處應該盡量使用 Arrow Function - Vuex 內可大膽完全使用 Arrow Function,還可搭配 Destructuring Assignment
Sample Code
完整的範例可以在我的 GitHub 上找到
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- RecyclerView使用指南(一)—— 基本使用
- 如何使用Meteorjs使用URL参数
- 使用 defer 还是不使用 defer?
- 使用 Typescript 加强 Vuex 使用体验
- [译] 何时使用 Rust?何时使用 Go?
- UDP协议的正确使用场合(谨慎使用)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
部落:一呼百应的力量
高汀 (Godin.S.) / 刘晖 / 中信出版社 / 2009-7 / 26.00元
部落指的是任何一群人,规模可大可小,他们因追随领导、志同道合而相互联系在一起。人类其实数百万年前就有部落的出现,随之还形成了宗教、种族、政治或甚至音乐。 互联网消除了地理隔离,降低了沟通成本并缩短了时间。博客和社交网站都有益于现有的部落扩张,并促进了网络部落的诞生——这些部落的人数从10个到1000万个不等,他们所关注的也许是iPhone,或一场政治运动,或阻止全球变暖的新方法。 那么......一起来看看 《部落:一呼百应的力量》 这本书的介绍吧!
JS 压缩/解压工具
在线压缩/解压 JS 代码
随机密码生成器
多种字符组合密码