vue 使用 vuex-persist 让store实现更便捷的存储 localStorage
安装 vuex-persist,
我这里用的是yarn: yarn add vuex-persist
简单应用:
在全局的store中
引入 import VuexPersistence from 'vuex-persist'
并且使用
1、在全局的state声明一个值 如:
const state = { query: {}, }
2、在mutations中写方法,当query变化的时候调用更新数据
const mutations = { setDetailQuery (state, query) { state.detailQuery = query } }
3、在 Store中添加vuex-persist的调用
export default new Vuex.Store({ state, getters, actions, mutations, plugins:[ new VuexPersistence({ reducer: state => ({ query: state.query //这个就是存入localStorage的值 }) }).plugin ] })
4、在需要存localStorage 的页面调用
import {mapState, mapGetters, mapMutations} from 'vuex' //引入state,getters,mutations
在methods里边引入mutations 方法
...mapMutations(['setQuery'])
在需要的地方使用,例:
在created 里边 调用方法
this.setQuery(this.$route.query)
5、在需要取的页面
computed: { ...mapState(['query']), },
猜您可能还喜欢
- Js异步async、await关键字详细介绍(lambda表达式中使用async和await关键字)(1687)
- CERT_HAS_EXPIRED错误如何解决(1407)
- vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别(966)
- Vue 2.x + Element后台模板开发教程(三)后台首页模板设计(958)
- Vue 2.x + Element后台模板开发教程(一)(784)
- vuejs中如何使用axios调用后台接口(741)
- vue.js初探(一)vue.js全家桶介绍(602)
- vue.js初探(二)vue项目创建(594)
- vue.js初探(三)vue页面结构(581)
- vue axios调用.net wepapi跨域设置(559)
评论列表
发表评论
文章分类
文章归档
- 2024年6月 (2)
- 2024年5月 (2)
- 2024年4月 (4)
- 2024年3月 (30)
- 2024年1月 (4)
- 2023年12月 (2)
- 2023年11月 (4)
- 2023年10月 (4)
- 2023年9月 (6)
- 2023年3月 (2)
- 2023年2月 (1)
- 2023年1月 (1)
- 2022年12月 (1)
- 2022年9月 (21)
- 2022年8月 (10)
- 2022年7月 (3)
- 2022年4月 (1)
- 2022年3月 (13)
- 2021年8月 (1)
- 2021年3月 (1)
- 2020年12月 (42)
- 2020年11月 (7)
- 2020年10月 (5)
- 2020年8月 (1)
- 2020年6月 (1)
- 2020年3月 (2)
- 2019年12月 (8)
- 2019年11月 (3)
- 2019年9月 (1)
- 2019年4月 (1)
- 2019年3月 (6)
- 2019年2月 (1)
- 2018年7月 (7)
阅读排行
- 1.asp.net mvc内微信pc端、H5、JsApi支付方式总结(5327)
- 2.各大搜索网站网站收录提交入口地址(2767)
- 3.ECharts仪表盘实例及参数使用详解(2680)
- 4.windows 10安装myeclipse 10破解补丁cracker.jar、run.bat闪退解决办法(2618)
- 5.华为鸿蒙系统清除微信浏览器缓存方法(2394)
- 6.Windows 10休眠文件更改存储位置(2364)
- 7.HTML5 WebSocket与C#建立Socket连接实现代码(2215)
- 8.HBuilder编辑器格式化代码(1782)
- 9.Js异步async、await关键字详细介绍(lambda表达式中使用async和await关键字)(1687)
- 10. asp.net mvc开发移动端省、市、县三级地区选择控件实现方法(1411)