前端开发中，我们经常需要使用脚手架工具构建项目，而脚手架一般需要提供一些特定的功能才能满足我们的需求。因此，npm包@umijs/plugin-initial-state应运而生，它是一个umi插件，提供了一种在服务端和客户端统一设置初始化数据的能力，使得前端应用可以非常便利的获取到服务端渲染的数据。
使用场景
在实际开发中，我们经常有这样的场景：我们需要在服务端渲染时获取一些数据，并在客户端中使用这些数据。这种情况下，我们需要将这些数据传递到前端，并在客户端中将其初始化。@umijs/plugin-initial-state就是解决这个问题的利器。
安装
$ npm install @umijs/plugin-initial-state --save-dev
使用方法
安装好插件之后，在.umirc.js中添加如下配置：
export default {
plugins: [ ['@umijs/plugin-initial-state', options] ],
}@umijs/plugin-initial-state插件提供了一个非常好用的API，就是getInitialState()。我们可以在该API中定义我们需要在服务端渲染时获取的数据，从而可以在客户端获取并使用这些数据。
以下是一个简单的示例：
export default {
getInitialState: async (ctx) => {
const { req } = ctx;
const user = await getUser(req);
return { user };
},
};在以上示例中，我们通过getUser()函数从请求的req对象中获取user信息，在getInitialState() API中返回一个名为user的对象，该对象会在客户端中挂载到window.__INITIAL_STATE__上，供我们后续使用。
深入理解
在上面的示例中，我们只是简单的返回了一个对象，你可能会很好奇这个对象是怎么转化成window.__INITIAL_STATE__的，以及这个window.__INITIAL_STATE__是什么时候被创建的？
实际上，当我们使用了@umijs/plugin-initial-state插件之后，会在服务端渲染时向响应的HTML文档中注入一段<script>代码：</p> <pre class="prettyprint login html"><script>window.__INITIAL_STATE__={"user":{...}}</script></pre><p>在客户端加载HTML文档时，浏览器会执行这段代码，将服务端注入的INITIAL_STATE对象挂载到window对象上，这样我们就可以在客户端中使用这些初始化数据了。</p> <p>如果你需要更加深入的理解插件的实现原理，可以看一下插件的源码实现。</p> <h2>总结</h2> <p>@umijs/plugin-initial-state插件可以说是umi生态中的一枚神器，它可以非常方便的在服务端和客户端间传递数据，极大提高了前端框架的开发效率和开发体验。希望这个简单的使用教程可以帮助你更好的理解和使用该插件，在实际开发过程中发挥它的作用，从而提升开发效率和质量。</p> <blockquote> <p>来源：<a href="https://www.javascriptcn.com/post/5eedaac2b5cbfe1ea0610586">JavaScript中文网</a> ，转载请注明来源 <a href="https://www.javascriptcn.com/post/5eedaac2b5cbfe1ea0610586">https://www.javascriptcn.com/post/5eedaac2b5cbfe1ea0610586</a></p> </blockquote>