Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧!
2013年7月28日,尤雨溪第一次在 GItHub 上为 Vue.js 提交代码;2015年10月26日,Vue.js 1.0.0版本发布;2016年10月1日,Vue.js 2.0发布。
最早的 Vue.js 只做视图层,没有路由, 没有状态管理,也没有官方的构建工具,只有一个库,放到网页里就可以直接用了。
后来,Vue.js 慢慢开始加入了一些官方的辅助工具,比如路由(Router)、状态管理方案(Vuex)和构建工具(Vue-cli)等。此时,Vue.js 的定位是:The Progressive Framework。翻译成中文,就是渐进式框架。
Vue.js2.0 引入了很多特性,比如虚拟 DOM,支持 JSX 和 TypeScript,支持流式服务端渲染,提供了跨平台的能力等。Vue.js 在国内的用户有阿里巴巴、百度、腾讯、新浪、网易、滴滴出行、360、美团等等。
Vue 已是一名前端工程师必备的技能,现在就让我们开始深入学习 Vue.js 内部的核心技术原理吧!
为什么要做vuex持久化?
vuex:基于内存的方案 存取速度特别快 基于vuex模式使用特别方便 ,缺点就是刷新就会丢失
localStorage:基于磁盘的方案 存取速度稍慢 操作起来没有vuex方便,优势是刷新不丢失
使用 vuex-persistedstate 插件可以帮助我们自动把vuex的数据同步到本地进行持久化缓存,利用 vuex 搭配 localStorage 存取速度快和vue配合灵活,且刷新不丢失
持久化原理:修改state中的数据即可触发同步机制,可以看到本地存储数据的的变化,每次修改只要数据变了就会自动把 vuex 同步到 localStorage;刷新的时候会自动从localStorage取然后同步到vuex
如何使用 vuex-persistedstate 插件
安装 vuex-persistedstate 包
// 在 store/index.js 文件中 // createStore一个方法 用来生成store实例对象 // vuex中的配置项完全保持一致 state getters mutations actions import { createStore } from 'vuex' import user from './modules/user' import cart from './modules/cart' import createPersistedstate from 'vuex-persistedstate' export default createStore({ strict: true, // 开启严格模式 modules: { // 组合模块 user, cart }, plugins: [ // 插件配置 支持多个插件的 createPersistedstate({ key: 'message', // 这个key会作为标识存入本地 paths: ['user', 'cart'] // 哪个模块进行持久化缓存 内部所有的数据都会进行持久换缓存 }) ] })
3.默认是存储在 localStorage 中,可以对存储的方法进行自定义
// 存到 sessionStorage
createPersistedstate({
storage: window.sessionStorage,
key: 'message', // 这个key会作为标识存入本地
paths: ['user', 'cart'] // 哪个模块进行持久化缓存 内部所有的数据都会进行持久换缓存
})
// 存到 cookie
// 需要下包 js-cookie
// 在main.js 中引入 import * as Cookies from 'js-cookie'
createPersistedstate({
storage: {
getItem: key => Cookies.get(key),
setItem: (key, value) => Cookies.set(key, value, {expires:7}),
removeItem: key => Cookies.remove(key)
},
key: 'message', // 这个key会作为标识存入本地
paths: ['user', 'cart'] // 哪个模块进行持久化缓存 内部所有的数据都会进行持久换缓存
})
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧!
王海霞
HFun 前端攻城媛
往期精彩: