@xunlei/vuex-connector

@xunlei/vuex-connector

基于 Vue 生态实现的 Vuex store connector，借鉴 React 容器组件和展示组件的模式。在 迅雷前端 掘金专栏 发表的 致敬 React: 为 Vue 引入容器组件和展示组件 详细说明了为什么我们应该使用容器组件，以及如何在 Vue 中编写容器组件。

安装

npm install @xunlei/vuex-connector

使用

初始化

store/index.js

import VuexConnector from '@xunlei/VuexConnector';

// 将store传入connecor进行连接
export const connector = new VuexConnector(store);

生成容器组件

containers/CounterContainer.vue

import Counter from '@/components/Counter';
import {connector} from '@/store';

export default connector.connect({
  mapStateToProps: {
    // total是Counter接收的prop之一
    total: state => state.count,
  },
  mapCommitToProps: {
    // onIncrease，onDecrease都是是Counter接收的prop
    onIncrease: 'increment',
    onDecrease: 'decrement',
  },
})(Counter);

使用容器组件

App.vue

<template>
  <div>
    <h1>容器组件-展示组件模式</h1>
    <CounterContainer/>
  </div>
</template>

<script lang="ts">
import CounterContainer from '@/containers/CounterContainer'

export default {
  components: {
    CounterContainer
  }
}
</script>

API

class VuexConnector

constructor(store: Store)

构造函数需要传入一个 Vuex store 的实例

connect

typescript 定义

connect({
  mapStateToProps?,
  mapGettersToProps?,
  mapDispatchToProps?,
  mapCommitToProps?
}): (Component: typeof Vue) => FunctionalComponentOptions<any>

connect 函数根据传入配置，生成一个高阶函数，高阶函数传入一个要连接的展示组件，即可生成最终的容器组件。

mapStateToProps 配置

{
  [prop: string]: (state) => anyState;
}

例子:

connector.connect({
  mapStateToProps: {
    userId: state => state.userId,
  },
})(Counter);

mapGettersToProps 配置

{
  [prop: string]: (getters) => anyGetter;
}

例子:

connector.connect({
  mapGettersToProps: {
    isLogin: getters => getters.isLogin,
  },
})(Counter);

mapDispatchToProps 配置

{
  [prop: string]: action: string;
}

例子:

connector.connect({
  mapDispatchToProps: {
    // onIncrease，onDecrease都是是Counter接收的prop
    onIncrease: 'increment',
    onDecrease: 'decrement',
  },
})(Counter);

mapCommitToProps 配置

{
  [prop: string]: mutation: string;
}

例子:

connector.connect({
  mapCommitToProps: {
    // onIncrease，onDecrease都是是Counter接收的prop
    onIncrease: 'increment',
    onDecrease: 'decrement',
  },
})(Counter);

License

MIT

Copyright (c) 2017 XunleiF2E