获得徽章 20
- #青训营笔记创作活动#
1月15日 打卡day33
今日学习
Store应该存储可以在整个应用中访问的数据，如导航栏中显示的用户信息，以及需要通过页面保存的数据，如非常复杂的多步骤表单。应该避免在存储中包含本可以托管在组件中的本地数据，如页面元素的可见性。
Pinia核心概念：
store：状态仓库
state：状态，和vuex保持一致
getters：类似组件的计算属性，和vuex的getters保持一致
actions：和vuex的actions保持一致，可以处理逻辑并修改状态
一个登录案例
1.mock
npm i -D vite-plugin-mock mockjs
webpack中通常会配置NODE_ENV。而Vite中defineConfig函数的config参数包含一个command属性，执行vite（开发）命令时值为serve，执行 vite build（构建）命令时值为build。mock插件有一个配置项可以决定是否开启服务，默认开启。结合command属性可以动态切换状态：
import {viteMockServe} from 'vite-plugin-mock'
plugins:[viteMockServe({localEnabled:command==='serve' })]
mock插件默认读取根目录下mock文件夹作为mock server。新建一个模拟用户接口的服务/mock/user.js，它导出一个数组，每一项模拟一个接口：
export default [{url:"/api/login",method:"post",response:()=>{return{code:0,message:'success',data:{token:"",username:"kw"}} }}]
2.使用
创建pinia
注册pinia
创建store
抽离需要管理的数据作为state，声明getters状态读取，声明actions处理业务逻辑
在需要的地方导入和使用store
3.状态持久化
Pinia数据是存在内存中的，页面刷新数据就会丢失。对于一些重要数据，需要持久化到本地存储，简单的数据可以直接调用Storage API。也可以使用持久化插件pinia-plugin-persistedstate。展开评论7 - 今天早餐店老板请教我怎么才能成功，我说回家睡觉，他说那店谁来打理，我说一个店离开你都转不起来，那么将来你开10个店那不都得黄，他仿佛听懂了，请我吃了顿早餐，并且回去睡觉了。简单的生活就是这么枯燥且乏味，听懂掌声！评论1
- 我的 Aurora（极光）主题系列出了【VSCode 的极光主题】，名字叫 “Aurora Future”
它用了Hexo Theme Aurora 相对应的颜色色系。这个主题的重点特性的就是只用了 3 个颜色，减少在写代码的时候被巨多颜色所转移了你的注意力，让你更集中在写代码上。
喜欢的大家可以支持一下哦！～
主题地址：
marketplace.visualstudio.com
GitHub 地址：github.com 展开313
不知道是不是自己理解错了，反正刚看到时是被笑到了
marketplace.visualstudio.com![[奸笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_17.bcebf79.png)