pinia和存储浏览器区别

好，这节课呢，来讲一下 pina 中的一个持久化存储。持久化存储， 首先呢，实现吃法存储呢，分为两种情况，第一种情况呢，就是我们直接自己写这个 local storage， 那这种我们就不说了，因为是直接写就可以了。 第二种形式呢，是利用插件形式，那这节课呢，我重点讲就是插件这种形式。好了，下面呢，来看一下我这个文档啊，那我这也写个文档，然后大家呢，可以参考我这个链接啊，参考链接我也给大家放到这，那具体怎么样去用呢？首先第一步，我们需要把这个插件呢进行一个下载，来到这呢，咱们就 利用这个 c a p m 呢，给它下载一下啊，下载完事以后呢，呃，我们还要去改一下之前的一些目录的结构啊，或者说文件吧，就是我们之前这个 pina 呢，是在 mate g s 直接引入的啊，然后呢， story 里边呢，并没有一个 index g s 啊。然后呢？其次我们插件内容呢？呃，放到这个全局上就不是特别好啊，就是它的维护性呢，就比较差了， 所以说呢，我在这儿还是改一下吧。啊，这儿呢，我就引 pro 的一个 store 啊，和之前目录结构差不多。然后这儿呢，有一个 rom， 找到这个点杠 store 下，我一会儿新建一个 index 点 g s， 只不过呢，这个 index g s 呢，我可以不用写，他会默认去找到。好，那现在呢，我要找到我的 store 目录下，新建一个 index 点 g s， 然后这个 inter gs 里边内容呢，就是我们要 create pina。 好，我们把这拿过来啊，这是 pina， 然后这个呢是引入呃， pina 的持久 画持久画存储插件啊，然后这呢是使用这个插件啊，就是 又死一下，对吧？好，那我们的这个 user 点 g s 以及售点 g s 内容是不需要进行任何调整的啊，就是说目前来说啊，当然这个插件呢，我们肯定要引入进去的。好了，现在呢，我们跑一下这个项目啊，刷新 啊，这样是没有问题的，对吧？那现在呢，我这有一个年龄，我一直点，比如点到三十岁了，然后我刷新一下，哎，又回到十八了，那明显是没有做到持法存储的好，下面我们看看该怎么去做啊？ 其实呢就是配置啊，比如说我要在 user 点 g s 中啊，给它进行这个配置。好，那我们就找到这个，最后啊给它加上这个开启数据缓存啊，就是那个插件 一旦开启完事以后，大家来看啊，刷新走啊，比如说我现在点到二十五吧，刷新一下，大家看是不是还是二十五呀？啊？就证明他其实已经尺码蹭出了，但是 大家要注意啊，他其实默认走的是 session 啊，走的是 session storage 啊，并不是我们的 local， 什么意思呢？就是我把这儿这个页面关了，然后我再进去还是一个十八，所以说我们要让他呢走 local storage， 你就要有更多的配置啊，比如这块 我们给他再来一个配对象，前面呢会指定一个 k， 然后这呢有一个 store， 呃，就这个，呃， storage， 对吧？这有个 storage， 然后这是 local storage， ok， 这样就可以了。好，那我们把这内容给他改一下，感觉刚才有一点别扭啊，这样会好一点 啊啊，然后呢，其实这样的就是他默认一开始的时候啊，比如说我这个东西我没有加吧，我没有加刷新啊，我们可以看一下他的绘画啊，在这有一个绘画。好，我们点也点点， 它会按照你的 id 也是你模块儿去定义前面这个 k 啊。好，那你这儿呢，可以指定一个 k， 比如说我们就叫它小路线下滑线， user， 好，来，稍息。 走走走，注意，这就不改了啊，找哪了？在这看到了吧？好，刷新一下。三十二啊，刷新还是三十二，对不对啊？关了我们再进去， 它还是三十二，那这样的话呢，就实现 logo 的这个持有化存储是吧？哎，这样就 ok 了。行，那其次呢，就是说，呃，这儿配置还有很多啊，比如我这儿也写了啊，就是你这个 模块中 state 数据比较多，比如 a 制，还有你的这个姓名啊，还有很多很多，比如 a 也好，是 b 也好，你其中这个 a b 呢，其实是不需要深化存储的，也是你数据里边不见得 所有都要持有它存储啊，你可以配哪些需要加进去，哪些不需要就可以不加进去，他默认是都加进去的哈，你可以单独去配哪些需要或者不需要。好吧，比如我们这样的说，哎，这个 age 需要这个 name， 需要啊，你就加进去就好了啊，当然，我这样呢就不给大家去加了啊，你知道这个意思就可以了。 好，这就是，呃，我们的这个 pina， 它的一个持续化存储啊，比较简单啊，就是和原来那 vivo x 差不多哎， pa 一配，然后直接呢就可以去用了，然后这个地方的数据呢，也都没有问题了。好， 那有关于 pina 的一个持卡存储，我就给大家先说到这里。

如果你正在使用温十或者是温十一的系统，那么请一定要关闭遥测相关的功能，因为这涉及到你的个人隐私问题。先说为什么要关闭遥测，再说怎么去关闭遥测，遥测功能呢？是微软从温度十八开始添加在温度系统中，用来收集我们的个人用户信息和诊断数据，并上传的微软服务器的一种手段。 摇车功能会收集我们的哪些数据呢？目前摆在明面上，大家都知道的有浏览器的浏览历史记录，我们的地理位置出入法的建入记录，你在电脑上的录音，打开了哪些软件等等等等一系列的问题啊，我认为呢，这些信息呢，已经非常的丰富了，足够威胁到我们的个人隐私。就拿我自己来说啊，浏览器的浏览历史记录啊，这个就足够隐私了是吧，懂得都懂。 除了明面上我们这些被收集的数据，那肯定还有一些在后台我们无法察觉或者无法感知的数据被微软给收集上传了。所以呢，在我国的温室啊，有一个特别的版本啊，叫做神州网线版，去掉了一些啊，系统里面比较敏感的主见和内容，专供正气部门使用。 那所以为什么我们要禁止遥测这一功呢？第一点原因就是保护我们的隐私问题，尽管他承诺这些隐私啊，不会用作第三方用途，但是呢，时代是会变的，所以呢，保护好了是绝对没有错的。第二个原因呢，就是可以降低我们系统的负担啊，因为呢，遥测功能在后台收集上转呢，会占用我们大量的贷款， 长期使我们的硬盘处在一个活动的状态，如果你的电脑配置较低的话，可能会感受到卡顿的现象。那接下来我们就教大家怎么去尽量关闭遥测相关的主见和功能。在温室和温室机的设置呢，大同小异，我们以温室系统为例，设置前呢，建议先创建一个还原点，防止意外。首先打开开始菜单，进入设置页面，选择左侧的隐私和安全性， 点击右侧的诊断和反馈进入，将发送可选诊断数据，设置为关闭，展开量身定制的体验，将允许麦克萨斯的使用我的诊断数据设置为关闭，展开最下方的删除诊断数据，选择删除。然后呢，返回隐私 安全性，进入语音选项。如果你开启了在线语音识别，那么下方呢，会有一个功能，向麦克萨斯提供自己的语音剪辑。我们需要点击停止提供我的语音剪辑， 让他显示啊，一个钥匙呢，表示呢是停止提供了。然后呢，返回隐私和安全性。继续进入活动历史记录，将在此设备上储存我的活动历史记录，设置为关闭。 然后呢，继续返回隐私和安全性。进入常规选项卡，将第一项允许使用我的 id 向我展示个性化广告，设置为关闭。然后呢，下面三项啊，大家能根据使用需求来选择关闭啊，因为呢，有一些功能确实可以提高 我们的使用效率。好了，设置方面结束，我们关闭设置页面。继续呢，打开注册表，在开始菜单中搜索注册表，或者输入 igdit， 点击打开，定位到第三项。 hclock machine 继续展开， software 展开， policies 展开， microsoft 展开 windows 选中下方的地，开 开头的位置 data collection。 然后呢，在右侧空白处点击右键新建 dio 的三 ci 位置，将名称命名为 a l l o w t e l e m e t r y 回车默认的数据呢是零，就是禁止开启摇车。然后呢，关闭注册表，继续打开主策略编辑器，搜索主策略，或者输入 gpe dit， 点 msa， 点击打开， 依次展开计算机配置管理模板，选择 windows 组建。然后呢，往下拉，找到数据收集和预览版本，点击一下，在右侧，我们找到允许整段数据这一个选项，双击打开，将其设置为已经用，点击确定。 然后呢，关闭左侧，略继续搜索服务，点击打开，或者输入 s e r v s e s 点 m s a， 点击打开。然后呢，往下看，找到 c 开头的位置，我们找到 click 的 uraxplains 这一个选项，双击进入，打开，将启动类型展开，设置为禁用，点击停止， 点击应用，点击确定。然后呢，关闭服务界面。最后呢，还需要修改任务计划程序，点击开始菜单，搜索任务计划程序，然后打开，依次展开左侧的任务计划程序。 microsoft windows 同样往下找，找到 c 开头的位置，找到 custom experience 这一项。双击打开。然后呢，在右侧我们选中第一个计划任务。我们看到呢，他是无期限，间隔每六小时重复一次，我们选中他，点击右键选择禁用。然后呢，关闭计划任务程序。 设置完以上的步骤，我们去重新启动一下我们的系统，等重启完之后呢，就已经进最大限度的去屏蔽摇车收集了。 这个系统啊，毕竟是人家开发的，他们能做的事啊，就是能源在我们用户的权限之上，我们只能尽量去关闭啊，那么除了这些麻烦的手动设置，也可以通过一些软件来进行快速的关闭，如斯莱特，阿布斯家家这一个软件啊，就可以关闭系统中的一些敏感的选项， 如果你是高手呢，也可以通过更改好奇的文件来让这个数据呢无法正常的传回微软的服务器。就是那电脑或手机上的软件搜集我们的隐私啊，可以说是司空见惯的，毫不留情的说啊，没有哪一款软件是不会去收集我们的隐私的，想尽一切办法收集我们的隐私，然后呢给我们推送 广告，甚至呢是通过电话去骚扰我们，尤其是在电脑上，我们预防呢还会变得特别困难，能做的就只有尽力去保护了。好了，我们今天的视频到此结束，下期的视频再见。拜拜。

pina is a new popular data store solution that is built off the composition api in this video， we'll highlight the features of pina compared to view x and then see how to use a pina store inside of our view app so one of the biggest differences between view x and pina is the fact that pina is modular by design in other words， it's built to have multiple stores the comparison vx only has one store and then you could have submodules underneath it but pina allows each of these modules to be their own store imported directly into components where needed and this allows bundlers to code split and have better typescript inferences another difference is that while ux has a state mutations， actions and getters pina does not have mutations and only has state actions and getters and there's a good reason for this previously mutations were needed to add necessary dev tooling to see when exactly a component will change， but with a lot of youth three's core features exposed， we can still see exactly when our state is changing without needing a specific mutation using the same kind of logic pina also lets us directly mutate our state， and we can see those changes in our dev tools and just like i'm showing now pina does automatically hook into views dev tools so as soon as you install it a lot of tab that shows a timeline unless it's track what changes are happening to each of our stores so let's go ahead and use this inside of our project let's say npm install penia and then inside mainjs we want to import creapenia from penia call app dart use and then invoke the creapenia method now let's create our first store let's create a folder called stores that will house all of our stores even though in this video， we're just gonna create one and that will be called counter js first， what we want to do is say import defined store from pina and then we'll export a const use counter store set it to define store and this takes two arguments the first one is a unique name and we'll call a counter and then the second one is an object that has our different options first will define a state and set it equal to an arrow function that contains the initial state of our store so we'll just return an object with a count of zero next let's define some actions by saying actions creating an object and our first function will be called increment this is a great time to point out that's similar to other data store solutions we can pass arguments into these actions so let's say val and give it a default value of one and inside we can directly mutate our state by accessing this and saying this dot count plus equals val and we can also make these actions a synchronous so for example， if we say async wait and add we can first call us that time out and then increment this dot count and then the final store property that we want to define is our getters and these are essentially computing properties for our store so for our example， let's create one called double count create an arrow function that accepts our state and return state count times too and that's all we have to do our store then let's open up a component and we can import use counter store from store counter to actually create a reference store store let's say constore equals use counter store here we can directly mutate our state by saying store dot count we can call our actions by saying stored on increment and then passing in a value and if you want to see a full list of what's available in the store object， we can just console dalark store and then inside of our template all of our properties are exposed understore let's create an h1 that says count equals store dot count an h2 that says double count is store dot double count a button that says increment and one clicked calls store dot increment and another button that calls waiting that and let's check it out see we load in and if we hit increment， they'll immediately jump and then if we call weight and increment， it'll wait two seconds and then all of the reactive values will update and this is already perfect we can import the store in many components and our data will be synced up one thing to note is that when we access a store like this we get an object wrapped with reactive so while we don't need dial value to access our properties we also cannot destructure it and maintain reactivity so for example， if we said const count eagle's store， this isn't a reactive value but there is a pina helper called store to refs that creates any reactive property inside of our store into a ref that we can now destructure so if we say const counts store to refs of store count is now a reactive ref and we'll work as expected so hopefully this pina simplified video is enough to get you up and running， but i'd love to hear what pina topics？ you'd love to see covered in the future i know that in my last community post this was a popular topic that you wanted to see so i wanted to create this intro video to the technology and hopefully create more in depth videos depending on which。

哈喽，大家好，今天跟大家分享一下浏览器本地存储方式，主要有三种，第一种是 gucci， 存储大小为四 k b， 最多二十个，主要存储登录信息。第二种是赛车思维者，属于绘画机，存储，咱们关闭页面或者关闭浏览器数据，数据就会清除。 三种是 logos 座位者，属于永久存储，除非咱们手动清除缓存才会把书记清掉。 loos 座位者和三人所有者在同一御下最多存储五兆。各个浏览器之间会略有差异。 如果是左右的和 cs 左的，有三个共同的 a， 共同的 api， 第一个是赛的艾特姆设置一个值，第二个是 get item 取一个值。第三个是克里尔，是倾注所有存储的数据。还有一种不常用的存储方式是 inst b。 好的，谢谢大家。

好，我们来说一下这道题，浏览器的存储方式有哪些？那么我们先来说一下它都有哪些存储方式？比如说第一种 cookies， 对吧？ cookies 有 k 加 b s， 那第二种呢？是什么呢？ local storage 对吧？等于二 storage， s， t o l a， g， e， 第三种呢？还有什么？ se session storage 对吧？ s e f s i o n s t o a g e ok， 还有第四种呢？可能大家，呃，不怎么听说过叫做 index d 的 i n d x e d d b， 他有这样几种存储方式啊？我们先来说 cookie， 那 cookie 呢？它是 h 五标准的，呃，就是 h 五标准前的一些本地存储的方式。好吧， h 五 好，那么他有哪些优点呢？比如说金融性好，还有什么呢？就是欠削，然后自带 cooking， okay， 那么他有什么缺点呢？就是，呃，存储量，看一下 存水量小，还有什么呢？嗯，我们这个自动，他在前镜头里面加入这个 cookie 呢，就可能我这个项目我都用，用不到，那你给我添加，那可能就会造成一些资源浪费，对吧？资源浪费， 还有就是，呃，使用麻烦，如果要使用，我们还要进行分装，分装， ok， 这就是 cookie。 那么 local storage 呢？ local storage 呢？它是 h 五加入的一种标准的方式。好吧，本地存储的一种方式，以建制队的形式来进行存储，它是 h 五 加入以线直棍为标准。 好，那么他有什么优点呢？就是操作方面，操作方面，然后呢？永久存储，永久存储，永久存储，然后兼容性比较好，兼容性较好。 另外呢，就是 local story 也它可以把就是第一次清理的数据呢，直接就存到本地。缺点呢？缺点是什么呢？就是，嗯， 可能有一些浏览器呢，他会把这个 local story 的 local storage， 咱们保存的这个值呢，就限定他的这个利息保存值，保存值的类型被限定， 还有就是浏览器在一些隐私模式下不可读取。 好，还有就是，嗯， logo storage 呢，它是不能够爬被爬爽的。嗯，对， 好，这是我们需要知道的一些关于 local storage 的内容。那么 session storage 呢？它和 local storage 差不多，它们两个的区别呢？就是 session storage， 它 是当前页面，嗯，关闭后，关闭后就会立刻清清理。 还有就是他不能够在所有的那个同源窗口中进行共享，他只是绘画，绘画级别的存储方式。好吧，绘画级别的一个存储方式。 嗯，那最后剩下的就是引带 x d b 了，它也是 h 五标准的一个 存储方式，他呢是一个数据库，可以进行键时段进行存储，也可以进行快速的读取。嗯，非常适合一些那个外的场景啊。同时如果说我们用 gs 去操作的话，会很方便， 也就是 h 五标志的存储方式方式。嗯，他是 一键值得进行存储，可以快速读取，这个适合 why 的场景。 ok， 这就是我们需要了解的关于浏览器的一些存储方式，大家记住就可以了。

有人问我应该学习 wilks 还是学习 pine， 你打开 wilks 的 guitar， 然后往下拖到这一段话，可能大家的英文不太好啊，我给大家翻译一下。这段话的意思就是后盾人每天晚上八点直播， 将军大叔在直播间里边与大家一起来聊技术啊，当然你也可以把它翻译成中文。抱歉啊，我翻译错了。这句话的意思就是说 vivo 官方状态已更改为 pine， 你可以简单的将 pine 视为不同名称的 vivox 五。而且大家看在 vivo 的官方文档，在生态系统这一块，核心库也已经换成了 pine， 然后像 td 站他的状态也换成了皮尼尔，然后 uni app 他的状态也换成了皮尼尔。所以新项目就不要用威武克斯了。

code 呢，确实是一个非常复杂的软件，听到这里啊，也许你的头都大了，那么在这里呢，小 s 给大家举一个非常直观的例子，每个有搜集电影习惯的人呢，他们的网盘或者是硬盘大多都长这个样子，但是呢，如果将他们统一都搞到 code 上面呢，他就会变成这个样子。 这下你们大家该明白我说的了吧， cody 真的是一个非常非常酷的软件， cody 呢，能把你存储在硬盘里面零零散散的，或者是呢存储在网盘上的全部的电影资源，并且自动将他们归类整理。 有的时候呀，一些电影发烧友会去网站上搜索一手的高清资源，那么其实这些高清的电影资源呢，都是没有字幕的，每次观看之前呀，也都要去字幕网站上去下载字幕，为了能够看这些一手的高清资源呀，还是相当麻烦的。当你下载了某个字幕插件之后呢，能够为你自动下载字幕， 想想都觉得很完美， cody 能做到的。不仅如此，他还可以按照电影的分类，导演，演员年份筛选你想要找的电影。有了 cody 之后，你直接点开电影海报就可以观看啦。

好，我们来说一下这道题，就是说一说浏览器的本地存储，他们各自的优势和缺点是怎样的？ 那么浏览器本地存储呢，它包括有 cookie， web storage， 那也就是 local storage 和 sension storage， 以及 index d b， 它们各自具有不同的特点和优劣势，咱们挨个来说。首先呢是 cookies， 它的优点是什么呢？就是 cookies 呢，它是最早引入到本地存储技术， 具有广泛的浏览器兼容性，并支持跨域存储。那么 cookies 呢，可以存储较小的数据量，可以设置过期时间，支持持久化保存和定时清除。它的缺点呢 就是 cookies 在每个 http 请求中都会被发送到服务器端，那么造成额外的网络流量受到浏览器的限制，每个域名下的 cookies 数量和总大小都有限制。同时 cookies 中的数据呢，可可以被读取和篡篡改，安全性呢是有限的。第二个呢，就是 web storage， 也就是我们常用的 local storage 和 sension storage。 它的优点呢，就是提供了大量的存储容量，并且只在客户端存储，不会在每个请求中发送到服务器。 local storage 和 session storage 呢，它提供简单的建制队存储，并且在同一浏览器窗口下共享数据。 缺点呢就是 web story 呢，他在浏览器当中呢，是永久性的，除非手动删除，否则数据会一直保留。由于浏览器的限制，数据在不同的浏览器窗口和标签页之间是无法共享。同时对于较旧的浏览器版本呢，他对 web story 呢，支持可能不够完整。 第三个呢，就是 index d b， 它的优点呢是呃，高性能可扩展的一个客户端数据库，可以存储大量的结构化数据，它支持事物和锁引，允许 高效的查询数据。那么 index d b 呢？它是一个异度 a p i， 可以在后台执行长时间运行的操作，不会阻塞主镜主现场。缺点是什么呢？就是它的这个 a p i 呢？相对复杂，学习呢？呃，开销比较大。由于不同浏览器对于 index d b 的支持不同，需要做好对浏览器兼容性的一个处理。 那么以上这些存储的技术呢，各有自己的特点，大家呢？需要根据项目的需求和浏览器兼容性来选择合适的这个技术。通常情况下，咱们使用 web storage 和 index tv 就可以满足大多数的本地存储需求。而 cookies 呢，它更适合处理绘画相关的数据。

时温十一系统默认只有一第一流量器，如何使用 ie 来安排？回到专面，双击打开计算机，打开本地磁盘 c， 选择 pro 个人们服用这个文件夹，双击打开，然后选择英坦那个 s pro 这个文件夹，然后找到 x pro 这个应用文件， 点击鼠标右键发送到桌面快捷方式回到桌面，点击大 e 这个图标，直接打开即可。正常使用 ie。 如果在 ie 中打开网页，会自动跳转到 edg 这个浏览器，在 edg 浏览器点击右上角三个点，点击设置， 然后选择默认浏览器，将这个选项设置为从部，然后点击确认即可。若想要电脑打开网页，自动选择 ie， 再按住键盘上 加 i， 打开温度的设置界面，然后打开应用这个选项，点击默认应用右侧，找到外部浏览器，点击 edge 更换为因他那台一个 spire， 点击仍然切换，然后关闭页面即可。

i e 浏览器退役了还可以用吗？当然可以，今天给大家分享一下都是系统怎么样使用 i e 浏览器。如果你经常使用 i e 浏览器呢，一定要把这个视频看完，因为最后一个设置你不设置的话呢，后续使用的时候肯定会有问题的。 在这个开始菜单上面点右键点搜索啊，在这个地方搜索 internd 这边我们就可以看到 a 浏览器，我们点右键，这里有个打开文件位置，点右键发送到桌面快捷方式 啊，你也可以把它放到任务栏上面，点右键固定到这个任务栏这里固定到任务栏啊，他就在这了。 微音十字带的 i 浏览器呢，是十一版本的，也就是最后一个版本，使用的时候有两个注意的事项，第一个就是你经常启动的时候，他会提醒你切换到这个异地基浏览器，你一点的话就自动切换了，所以说你不要去点啊，一定要点这个 叉叉啊。还有个设置非常重要，如果你不设置的话，这个浏览器用着用着会自动跳转到一 d g 浏览器，怎么样设置的？在这里点右键搜索，我们找到这个一 d g 浏览器啊，如果你没有没有的话，你搜一下一 dg 啊，找到他的话，我们把它打开，在右上角点这三个点，然后点这一个设置 点，设置在设置里面，这里有个末日浏览器，点一下，然后在这个地方一定要把它设置为从部，如果你不设置为从部了，打开 a 的时候就会自动跳转到这个浏览器上面，跳到这个新的浏览器上面，所以我们选为从部，然后再点确认，这样的话呢，你就不会自动跳转到 e d g 浏览器了。