【开发小记】vuex存储用户信息

今天开发的过程中，遵循前人的经验对用户信息进行了存储。实现这个功能之后，我突然想到vuex本质是什么呢？它为什么要存在，以及它和浏览器的缓存的区别又是什么呢？ （第三小节会给出一些理解hhh）

一、背景

今天在开发过程中发现多个组件都需要展示部分用户信息，而且它们并不属于父子组件这些情况。刚开始后端同学给出的建议是每次需要用到相关信息，就拿着token去后台请求一次。但是这存在一定的效率开销，因此后来我们选择了vuex来存放这些共享状态。

二、实际操作

（1）通过http请求获取用户数据的操作
首先在src/service下定义了api.js（这里主要封装了一些与网络请求相关的操作）

// 封装请求实例,加上拦截
class HttpRequest {
  constructor(options) {
    this.defaults = {
      baseUrl: ''
    }

    this.defaults = { ...this.defaults, ...options }
  }
  interceptors(install) {
    install.interceptors.request.use(config => {
        // ###################加密后的user_id
      const token = localStorage.getItem('token');

      if (token) {
        config.headers.authorization = `token ${token}`;
      }

      return config
    }, err => {
      return Promise.reject(err)
    });

    install.interceptors.response.use(res => {
      const { data } = res;

      return data
    }, err => {
      return Promise.reject(err)
    });
  }

  request(options) {
    options = { ...this.defaults, ...options }
    const instance = axios.create(options);
    this.interceptors(instance);
    return instance
  }
}

const http = new HttpRequest({
    // 这里调整路径base
  baseURL: ''
}).request();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

获取用户信息

/**
 * 获取用户信息
 * @export
 * @param {Object} params - 
 * @param {string} [params.user_id] - 用户id
 * @returns
 */
export async function userInfo(params) {
    // 这里先获取用户的基本信息
  return await http.post(path.UserGet, params)
}
1
2
3
4
5
6
7
8
9
10
11

上面代码中的path是将所有请求地址都存放在了src/config 下的 path.js中，是由于我们目前采用node模拟了后台数据接口，path.js如下，等到后台正式部署，我们就能通过修改以下的IPPORT值即可统一替换了

const IPPORT = 'http://127.0.0.1:8302'
const path = {
    UserSave : IPPORT + '/user/save',
    UserGet : IPPORT + '/user/get',
    UserStop: IPPORT + '/user/stop',
    WallSave: IPPORT + '/wall/save',
    WallGet: IPPORT +  '/wall/get',
    WallDelete: IPPORT + '/wall/delete',
    picUpload : IPPORT + '/image/upload',
    CarouselGet: IPPORT + '/carouse/get',
    ActivityGet:IPPORT + '/activity/getNew',
    SearchGetUsers:IPPORT+'/search/getUsers',
    homeGetUsers:IPPORT+'/home/getUsers',
    blogGet:IPPORT+'/blog/getAll',
    addLike:IPPORT+'/like/add'
}
export default path
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

（2）然后在src/store下的index.js里写vuex相关的内容

当登录成功的时候将服务端返回的用户信息通过调用changeUserInfo更新到vuex中即可。可以参考下面的操作

然后在要使用的组件中就可以直接调用了

this.$store.state.userInfo
1

三、分析

因为我将token存放在localstorage里面进行了持久化缓存，所以突然想到vuex本质是什么呢？它为什么要存在，与浏览器缓存的区别又在哪里？

• 首先vuex是vue的生态系统提供的一个插件，用来进行数据的状态管理，也就是集中管理项目公共数据
• 由于js代码都运行在内存中，所以vuex其实也存放在内存中，刷新会导致数据丢失——怎么解决？
• 然后vuex解决了浏览器存储的一些问题：（1）vuex可以监听数据的变化，当vuex数值发生变化时，其他组件可以响应式的监听到该数据的变化，当数据改变时，项目中引用到该数据（并且正在监听）的地方都会发生改变————————怎么实现这种监听的?（2）可以存储任意形式的数据。 浏览器存储中，数据只能以字符串的形式传入，对于不是string形式的数据需要JSON.stringify()和JSON.parse()配合读写 （3）没有数据存储大小限制 vuex存储哎内存中，而浏览器本地存储是存储在客户端本地的，又一定的存储大小限制（cookie大概在4k左右，localstorage和sessionstorage大概在M左右）存储的内容过多会消耗内存空间，导致页面变卡

其实上述问题去探索的过程中又延申了新的问题，就是vuex保存的数据，一刷新数据就没有了，这个怎么解决呢？

方案一：可以使用本地存储，把vuex中需要持久化存储的值采用浏览器本地存储缓存一份，当刷新页面时如果vuex被初始化拿不到数据时可以使用缓存中记录的数据。类似这样：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    //  直接使用本地存储的方式
    name: JSON.parse(sessionStorage.getItem('name')) || 'name'
  },
  mutations: {
    set(state, data) {
      //  修改数据的时候直接存到本地
      sessionStorage.setItem('name', JSON.stringify(data))
      state.name = data
    }
  },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

方案二：使用插件
下载

npm install vuex-persistedstate --save

1
2

使用，例如采用插件存放到localStorage里

import Vue from 'vue'
import Vuex from 'vuex'
//  配置插件vuex-persistedstate插件
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex)
export default new Vuex.Store({
  plugins: [createPersistedState(
  //这里可以填配置项，默认是localStorage，可以写storage：window.sessionstorage来换成sessionstorage
  )],
  state: {
    name: 'name'
  },
  mutations: {
    set(state, data) {
      state.name = data
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

对于vuex中数据的监听

小李在进阶的博客
这个举例比较清楚。

对于vuex的源码解析：
https://juejin.cn/post/6844903507057704974
https://juejin.cn/post/6844903676721496071

参考博客：
Luckier_hop的博客
阿晴熙熙的博客