如何使用 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,無論是 computedmethodwatch …,其本質都是 function,唯若要存取 Vue Instance 的 property,也就是要使用 this 時,就要使用 Anonymous Function,不能使用 Arrow Function,其餘之處應該盡量使用 Arrow Function
  • Vuex 內可大膽完全使用 Arrow Function,還可搭配 Destructuring Assignment

Sample Code

完整的範例可以在我的 GitHub 上找到


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

查看所有标签

猜你喜欢:

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

部落:一呼百应的力量

部落:一呼百应的力量

高汀 (Godin.S.) / 刘晖 / 中信出版社 / 2009-7 / 26.00元

部落指的是任何一群人,规模可大可小,他们因追随领导、志同道合而相互联系在一起。人类其实数百万年前就有部落的出现,随之还形成了宗教、种族、政治或甚至音乐。 互联网消除了地理隔离,降低了沟通成本并缩短了时间。博客和社交网站都有益于现有的部落扩张,并促进了网络部落的诞生——这些部落的人数从10个到1000万个不等,他们所关注的也许是iPhone,或一场政治运动,或阻止全球变暖的新方法。 那么......一起来看看 《部落:一呼百应的力量》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

随机密码生成器
随机密码生成器

多种字符组合密码