# vuex持久化(新版)

# 什么是vuex?

# vuex可以用来做全局状态(数据)的管理。

# 什么是持久化vuex

# 持久化vuexVK框架vuex的基础上进行的深度封装,使vuex具有持久化储存

# 目前有2种方式操作vuex数据

# 方式一:

// 获取 Vuex 数据: 
vk.getVuex('$user.userInfo')

// 更新 Vuex 数据:
vk.setVuex('$user.userInfo.avatar', avatar);
1
2
3
4
5

# 方式二:

// 获取 Vuex 数据: 
vk.vuex.get('$user.userInfo')

// 更新 Vuex 数据:
vk.vuex.set('$user.userInfo.avatar', avatar);

// 获取 Vuex getters 数据:
vk.vuex.getters('$user/getUserInfo');

// 提交 Vuex mutations:
vk.vuex.commit('$user/addFootprint', data);

// 触发 Vuex actions:
vk.vuex.dispatch('$user/addFootprint', data);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 特殊说明

# vk.getVuex('$user.userInfo.avatar')vk.vuex.get('$user.userInfo.avatar')

#vuex原生写法 this.$store.state.$user.userInfo.avatar 的优势

# 优势一:

# 原生写法当 $user$user.userInfoundefined 时,js会报异常,从而会导致页面加载失败。

# 而使用 vk.getVuex(key)vk.vuex.get(key)时,当某一级属性为undefined时,不会报异常,会直接返回空。(所以可以大胆这样写而不需要进行判断前面一级是否有值)

# 优势二:

# 原生写法获取到的值如果在外部赋值,严格模式下控制台会有黄色警告。

# 而使用 vk.getVuex(key)vk.vuex.get(key)时则不会有警告。

# 问题

# 1、vuex模块文件地址保存在哪里?

# /store/modules/

# 2、演示vuex功能示例页面:

# /pages_template/vk-vuex/vk-vuex.vue

# 3、为什么新版本去除了全局混入的方式?

# 此处需重点说明

# 全局混入的方式虽然使用起来更加方便,但是会严重影响小程序端的渲染性能。

# 经过极端测试,若1个页面有1000个自定义组件(比如1000个 u-button 组件)

# 此时若 vuex 内的数据有20kb,则这个页面的渲染数据达 1000*20KB 接近 20MB,测试下来,渲染时间要5秒左右,严重影响小程序页面加载时间。

# 而使用新方案,则不会影响页面加载时间。

# 4、老版本vuex如何升级新版本vuex

# vuex非框架必须集成,若你的vuex有很多页面在使用,可能升级起来比较复杂,也可选择不升级。

`main.js`中

老版本
import storeUtil from './store/lib/index'
Vue.prototype.vk.init({
  Vue,               // Vue实例
  config,	     // 配置
  store : storeUtil, // vuex简写法则
});

新版本
Vue.prototype.vk.init({
  Vue,               // Vue实例
  config,	     // 配置
});

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

文件变动

删除 /store/lib 目录
删除 /store/mixin 目录
1
2

代码变动

vk.state('$user').userInfo.avatar; 
改成 
vk.getVuex('$user.userInfo.avatar'); 或 vk.vuex.get('$user.userInfo');

vk.vuex('$user.userInfo.avatar', avatar);
改成 
vk.setVuex('$user.userInfo.avatar', avatar); 或 vk.vuex.set('$user.userInfo.avatar', avatar);

{{ $user.userInfo.avatar }}
改成
{{ vk.getVuex('$user.userInfo.avatar') }}{{ vk.vuex.get('$user.userInfo.avatar') }}

1
2
3
4
5
6
7
8
9
10
11
12