美文网首页
vuex 入门及持久化

vuex 入门及持久化

作者: 填完一个又一个 | 来源:发表于2018-03-02 15:07 被阅读0次

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官方文档学习。

相关文章

  • 后台管理(4)--- vuex的实际使用(vue)

    今天我们来讨论一下在项目中到底应该怎么使用vuex(vuex还没有入门的同学可以先看这个链接vuex 入门及持久化...

  • vuex 入门及持久化

    vuex是什么?官方是这么定义的 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储...

  • vuex-along

    vuex-along - 持久化存储 state 的 vuex 扩展 安装 使用 配置

  • vuex配置

    vuex配置 目录 vuex的五个核心 配置vuex vuex持久化 一、vuex五个核心概念 State 定义状...

  • 前端废物的自救之路(3)使用Cookie完成Nuxt.js中Vu

    前端废物的自救之路(3)使用Cookie完成Nuxt.js中Vuex的持久化 为什么需要Vuex持久化 在开发的过...

  • Vuex数据状态持久化:vuex-persistedstate、

    vuex-persistedstate 安装 使用 需要持久化的数据 vuex-persist 它就是为 Vuex...

  • 配置 vuex 和 vuex 本地持久化

    配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...

  • vuex

    配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...

  • vuex的使用

    配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...

  • vuex 持久化

    利用vuex-persistedstate插件 插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都...

网友评论

      本文标题:vuex 入门及持久化

      本文链接:https://www.haomeiwen.com/subject/ntsaxftx.html