标签：存储 Vue sessionStorage state localStorage userinfo 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应用面

1. 全局状态管理，可以将一组数据、方法集中到一个插件中管理，利好组件间通信
2. 数据多级处理，在一组数据的处理上，我们可以选择不同层级的处理方式，满足各组件对数据共享的实际过程差异化。

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 。。)访问

标签：存储,Vue,sessionStorage,state,localStorage,userinfo,vuex
From： https://www.cnblogs.com/Leethon-lizhilog/p/17142474.html