vuex 入门及持久化

vuex是什么?官方是这么定义的    

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

个人理解就是vuex是vue的一个小型状态管理仓库,可以跨页面操作其他页面的数据状态。

基于vue-cli

安装

下载vuex,npm install vuex --sava。这里为什么要加save因为vuex不光在开发使用在生产环境也需要使用。

新建文件夹vuex,在vuex下面创建store.js文件,写入代码

引入

其他页面拿到vuex里面的数据

这里注意的是引入vuex的时候必须加一个{},不然会报错。

其他页面修改vuex的数据

vuex持久化

思路

vuex也是js,所以在客户端,页面刷新后数据就丢失了,有时候我们希望数据一直都在,这样我们就需要用到常用的常用的存储工具localStory,思路就是每次数据发生改变的时候就存入一下localStory,然后初始化的时候读取一下localStory就可以了。

实现

这里只是简单的介绍了一下vuex的使用,如果想深入学习可以点击Introduction · Vuex官方文档学习。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 从前有只狸花猫阅读 1,157评论 0 2
  • 这是一个我险些错过的好故事。 故事发生在黄河岸上,黄土地上的农民们爱着唢呐,用唢呐来操办红白喜事。主人公天鸣的父...
    韩景筱筱阅读 4,434评论 0 1
  • 昨天早上一出门,竟然发现外面下雪了,静悄悄的,没有一点预告。 我是一个土生土长的东北妹子,在我很小的时候,东北的雪...
    时间电影院阅读 3,085评论 4 4
  • “离心,我明日就要登基了。”韬光养晦多年终于得偿所愿, 他该是极欣喜的。 “甚好。” 一身繁重的戏服压得他身形一颤...
    白尸阅读 3,477评论 0 4

友情链接更多精彩内容