开始你的优雅状态管理

因为vue内建类型的特性使得写代码的时候失去了很多JavaScript强大的功能。特别是喜欢functional的同学在处理列表时只能用蹩脚的vue.array定义的方法解决问题。这些都给我们操作数据(大部份时列表数据)时带来不可忽视的开发体验。这也是vuex-lens存在的原因，用一种更加优雅的方式去解决数据更新问题。

为什么做这个库，如果你之前是fp的拥趸，或者在react中使用ramda,都应该了解fp与vue的风格是格格不入的,如果使用immutable风格的数据会导致大量数据重建和触发依赖更新, 所以本项目就是使用vue风格非immutable的lens库.

特点:

• 非immutable
• 非currable

lenses为一个古老的functional programming概念，这里不作太多解释了，如果没使用过的同学下面找了一些资料。

https://medium.com/javascript-inside/an-introduction-into-lenses-in-javascript-e494948d1ea5

http://fluffynukeit.com/how-functional-programming-lenses-work/

这里我留言了一个通俗解释 http://functional-programming.cn/t/topic/60/2?u=qquanwei

安装

npm install vuex-lens --save

api

• get
• set
• over
• propLens
• lens
• lensToVueLens

例子

创建lenses

import { propLens, lens } from 'vuex-lens';

const nameL = propLens('name');
const nameL = lens((obj) => obj.name, (value, obj) => obj.name = value);

获取值

import { get } from 'vuex-lens';

const obj = { name: 'Alice' };
const name = get(nameL, obj);

console.log(name)  // -> Alice

简单写入

import { set } from 'vuex-lens';

const obj = { name: 'Alice' };

set(nameL, 'Bob', obj); // 返回obj相同的对象, 此时会产生副作用 obj.name 已经被修改，会触发vue的依赖更新

console.log(obj.name) // -> Bob

transformer

import { over } from 'vuex-lens';
import { difference } from 'lodsh/difference';

const differencer = (a) => (b) => difference(b, a);

const array1 = [1,2,3,4,5,6,7,8,9];

const obj = {
  list: array1
};

const array2 = [3,5,6];

// 想实现的功能是 array1 - array2. 也就是difference(array1, array2);


const listL = propLens('list');

over(listL, differencer(array2), obj); // 此时obj.list为减去3,5,6的list1数组,且会触发vue的依赖更新。

form 的更新

import { lensToVueLens, lens } from 'vuex-lens';