vuex和本地存储,vuex数据存储
本文主要介绍了利用vuex-persistedstate实现vuex的本地存储，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
vuex-持久状态使用vuex的本地存储。vuex-持久状态的本地存储是vuex的五个核心是什么？当然，还有另一种方法来存储VUEX的本地存储。
vuex-persistedstate将vuex本地存储
使用场景
最近在Vue项目里做登录模块。成功登录后，我得到了令牌并存储在vuex中。但是我发现切换路由后vuex中的数据全部恢复默认，刷新原页面后vuex中的数据全部恢复默认。稍后认证需要令牌，所以我们需要在本地将数据存储在vuex中。
这里使用的是vuex持久性插件vuex-persistedstate。
Vuex-persistedstate
这个插件的原理结合了存储方式，但是统一配置后，就不需要手动编写存储方式了。
用法：
安装
npm安装vuex-持续状态-保存
在store下的index.js中引入配置
从“vuex”导入{ createStore }
从“vuex-persistedstate”导入createPersistedState
导出默认的createStore({
状态：{ }，
突变：{ }，
动作：{ }，
模块：{ }，
插件：[
createPersistedState()，
],
})
这是localStorage的默认存储。如果要存储到sessionStorage，配置如下
从“vuex”导入{ createStore }
从“vuex-persistedstate”导入createPersistedState
导出默认的createStore({
状态：{ }，
突变：{ }，
动作：{ }，
模块：{ }，
插件：[
//将vuex的数据存储到sessionStorage
createPersistedState({
存储：window.sessionStorage，
}),
],
})
默认情况下保持所有状态。如果要存储指定的状态，请按如下方式进行配置
从“vuex”导入{ createStore }
从“vuex-persistedstate”导入createPersistedState
导出默认的createStore({
状态：{ }，
突变：{ }，
动作：{ }，
模块：{ }，
插件：[
//将vuex的数据存储到sessionStorage
createPersistedState({
存储：window.sessionStorage，
减速器(val) {
返回{
//仅在状态中存储用户数据
用户数据：val.userData
}
}
}),
],
})
API
Key:用于存储持久状态的key(默认vuex)路径：部分持久状态的任何路径的数组。如果没有给定路径，则完整状态是持久的。(默认值：[])reducer:将被调用以基于给定路径保持状态的函数。默认情况下包括这些值。订阅者：被调用来设置变异订阅的函数。默认为store=handler=store . subscribe(handler)storage:而不是(或结合)getState和setState。默认值为localStorage。GetState:将被调用来恢复先前持久状态的函数。使用默认存储。SetState:将被调用来保持给定状态的函数。使用默认存储。Filter:将被调用来过滤任何最终将触发setState存储的突变的函数。默认值为()=true
vuex的本地存储
vuex是什么
Vuex是专门为Vue.js应用开发的状态管理模式。
Vuex是一个仓库，被称为存储公共数据的地方。任何组件都可以使用vuex中的数据。
vuex中的五大核心
存储StateVuex存储实例的State对象用于定义共享数据和设置变量。
向ActionStore发送调用通知以执行异步操作。
突变它只用于修改state中定义的状态变量，相当于vue中的方法执行逻辑代码操作。
模块对状态进行分类，相当于模块。
Getters外部程序用它来获取变量的具体值，或者在取值之前做一些计算(可以认为是存储的计算属性)。
插件，这是数组显示而不是对象显示。数组是对象的形式，vuex的本地存储存放在数组中。
Vuex-persist是指Vuex是插件数据的缓存，本质上和localStorage是一样的。它在本地存储数据。当然，这个插件的特性只能在vuex中使用，不能在vue中使用。
那么 vuex-persist 如何使用
在终端中下载
cnpm安装vuex-保存-保存
下载后需要导入vuex。
从“vuex-persist”导入vuexPersist
引入后，需要在导出默认中实例化。
插件：[
新的vuexPersist({
本地存储：window.localStorage，
}).插件，
],
将localStorage写入对象之外的新对象中
新对象需要与引入的对象同名。
当然vuex的本地存储还有一种方式
以上方式相对来说复杂
直接在终端下载。
cnpm安装vuex-持续状态-保存
可以直接在插件中调用。这个方法先简单，不需要再去new。
插件：[
持续()
]
这就是vuex的本地存储。以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。