Research
Security News
Malicious npm Package Typosquats react-login-page to Deploy Keylogger
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
@xunlei/vuex-connector
Advanced tools
Readme
基于 Vue 生态实现的 Vuex store connector,借鉴 React 容器组件和展示组件的模式。在 迅雷前端 掘金专栏 发表的 致敬 React: 为 Vue 引入容器组件和展示组件 详细说明了为什么我们应该使用容器组件,以及如何在 Vue 中编写容器组件。
npm install @xunlei/vuex-connector
store/index.js
import VuexConnector from '@xunlei/vuex-connector';
// 将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>
class
VuexConnector构造函数需要传入一个 Vuex store 的实例
typescript 定义
connect({
mapStateToProps?,
mapGettersToProps?,
mapDispatchToProps?,
mapCommitToProps?
}): (Component: typeof Vue) => FunctionalComponentOptions<any>
connect 函数根据传入配置,生成一个高阶函数,高阶函数传入一个要连接的展示组件,即可生成最终的容器组件。
{
// state 指的是 vuex store 的state
// props 指的是调用容器组件时传来的所有的props,是个对象
[prop: string]: (state, props) => anyState;
}
例子:
connector.connect({
mapStateToProps: {
userId: state => state.userId,
},
})(Counter);
{
[prop: string]: (getters, props) => anyGetter;
}
例子:
connector.connect({
mapGettersToProps: {
isLogin: getters => getters.isLogin,
},
})(Counter);
{
[prop: string]: action: string;
}
例子:
connector.connect({
mapDispatchToProps: {
// onIncrease,onDecrease都是是Counter接收的prop
onIncrease: 'increment',
onDecrease: 'decrement',
},
})(Counter);
{
[prop: string]: mutation: string;
}
例子:
connector.connect({
mapCommitToProps: {
// onIncrease,onDecrease都是是Counter接收的prop
onIncrease: 'increment',
onDecrease: 'decrement',
},
})(Counter);
Copyright (c) 2017 XunleiF2E
FAQs
Unknown package
The npm package @xunlei/vuex-connector receives a total of 0 weekly downloads. As such, @xunlei/vuex-connector popularity was classified as not popular.
We found that @xunlei/vuex-connector demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.