Vue数据存储及vuex状态管理
Vue数据存储及vuex状态管理
我们想要往浏览器客户端存储数据，有三种方式：
- localStorage —— 存储到本地，浏览器重新开数据还存在
- sessionStorage —— 存储到浏览器应用，浏览器关闭数据就消失
- cookie —— 存储到本地的cookie，但是有失效时间，且vue中要借助第三方插件设置
Vue数据存储的三种方式
localStorage
默认永久存储在本地
// 按kv存储
localStorage.setItem('userinfo', JSON.stringify(this.userInfo))
// 按k取出v
localStorage.getItem('userinfo')
localStorage.clear() // 清空全部
localStorage.removeItem('userinfo')
注意，存储的键值都只能是字符串，如果想存对象，那就得先序列化，为了统一存储和取出的过程，建议都使用序列化存储或更多加密解密措施。
sessionStorage
关闭浏览器时会自动清理
// 按kv存储
sessionStorage.setItem('userinfo', JSON.stringify(this.userInfo))
// 按k取出v
sessionStorage.getItem('userinfo')
sessionStorage.clear() // 清空全部
sessionStorage.removeItem('userinfo')
设置cookie借助第三方插件
过期时间内存储在本地，到过期时间自动清理
有很多第三方模块可供使用，这里使用vue-cookies插件：
cnpm i vue-cookie
使用：
cookies.set('userinfo', JSON.stringify(this.userInfo)) // 按kv设置
cookies.get('userinfo') // 按k取v
cookies.delete('userinfo')
vuex状态管理
vuex应用面
- 全局状态管理，可以将一组数据、方法集中到一个插件中管理，利好组件间通信
- 数据多级处理，在一组数据的处理上，我们可以选择不同层级的处理方式，满足各组件对数据共享的实际过程差异化。
vuex依赖
vuex插件可以在创建项目时就在手动配置时下载安装。
如果没有创建时没有下载，那也可以用npm或cnpm安装。
npm install vuex@next --save
vuex使用
src/store/index.js中
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// 放数据
name:'leethon'
},
// getters: {
// },
mutations: {
// 放方法，对这个层级的定义是和开发工具交互的方法
rename(state, 其他参数){
// state:state中的数据
state.name = 'xxx'
}
},
actions: {
// 放方法，对这个层级的定义是和后端交互的方法
rename(context, 其他参数){
// context:与$store同义
// 一般直接接commit去执行mutations中的方法
context.commit('mutations中的方法名', 其他参数)
context.state = 'heihei'
}
},
// modules: {
// }
})
在Vuex.Store中写入的state数据可以在任何组件通过
this.$store.state.变量名访问到，可以直接改，则组件中的数据就是只走了重新渲染{{$store.state.变量名}}也可以直接插值
action中的方法可以通过$store.dispatch('方法名'，参数1，参数2 。。)访问。
mutations中的方法可以通过$store.commit('方法名'，参数1，参数2 。。)访问
