如何使用 FP 風格開發 Vue ?

栏目: JavaScript · 发布时间: 7年前

内容简介：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 上找到

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

查看所有标签

猜你喜欢:

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

码农书籍

Uberland

Alex Rosenblat / University of California Press / 2018-11-19 / GBP 21.00

Silicon Valley technology is transforming the way we work, and Uber is leading the charge. An American startup that promised to deliver entrepreneurship for the masses through its technology, Uber ins......一起来看看《Uberland》这本书的介绍吧!

码农工具