如何使用 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

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 上找到

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Servlet与JSP核心编程

[美]Marty Hall、Larry Brown、Yaakov Chalkin / 胡书敏 / 2009-6 / 68.00元

《Servlet与JSP核心编程(第2卷第2版)》在第l卷的基础上，广泛涉及自定义标签库、过滤器、声明式安全、JSTL和Struts等主题，并沿袭深受读者喜爱的写作风格，通过完整、有效、资料丰富的程序来演绎目前最流行的技术和最佳实践。Java EE已经成为电子商务网站、动态网站和Web应用与服务开发的首选，作为这一平台的基础，servlet与JSP的重要性日益突出，并在极短的时间内得以迅速普及。......一起来看看《Servlet与JSP核心编程》这本书的介绍吧!

码农工具