Proppy Vue是一個為Vue框架設(shè)計的狀態(tài)管理解決方案，它與Proppy庫相結(jié)合使用，可以使得狀態(tài)管理更加簡單易用。Proppy Vue的主要思想是將狀態(tài)分離到一個單獨的容器中，這樣可以避免將狀態(tài)放在組件中，從而使每個組件都有機會訪問它。

import Vue from 'vue';
import { createProvider } from 'proppy-vue';
import { withState } from 'proppy';
const BaseComponent = Vue.extend({
props: {
title: String,
},
render(createElement) {
return createElement('h1', null, this.title);
},
});
const provider = createProvider(() =>withState('title', 'setTitle', 'Hello World!'));
const WrappedComponent = provider(BaseComponent);
export default WrappedComponent;

如上所示，Proppy Vue可以很輕松地將狀態(tài)與Vue組件混合。通過withState HOC，可以在Proppy容器中定義狀態(tài)，并將其傳遞給參數(shù)的BaseComponent。隨著標(biāo)題值的更改，將自動重新渲染BaseComponent。

Proppy Vue還支持高階組件的復(fù)合，它可以將多個HOC組合在一起以創(chuàng)建更復(fù)雜的組件。有以下示例：

const provider = createProvider(() =>compose(
withState('title', 'setTitle', 'Hello World!'),
withComputedProps({
upperTitle: ({ title }) =>title.toUpperCase(),
}),
withHandlers({
onClick: ({ title, setTitle }) =>() =>{
setTitle(`${title}!`);
},
}),
),
);
const BaseComponent = Vue.extend({
props: {
upperTitle: String,
onClick: Function,
},
render(createElement) {
return createElement('button', {
on: { click: this.onClick },
}, this.upperTitle);
},
});
const WrappedComponent = provider(BaseComponent);

在上面的例子中，使用HOC對狀態(tài)進(jìn)行了更復(fù)雜的操作。withComputedProps將計算屬性添加到組件中，withHandlers則會為onClick事件添加處理器。最后，通過compose將這些組件合并。最終結(jié)果是一個具有標(biāo)題、上標(biāo)題、點擊事件處理程序的Vue按鈕組件。