uniapp中使用本地缓存还是使用vuex状态管理器？

曼妙佳人

uni-app的Storage在不同端的实现不同：

• H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理
• App端为原生的plus.storage，无大小限制，不是缓存，是持久化的
• 各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。
• 微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
• 支付宝小程序单条数据转换成字符串后，字符串长度最大200*1024。同一个支付宝用户，同一个小程序缓存总上限为10MB。
• 百度、字节跳动小程序文档未说明大小限制
• 非App平台清空Storage会导致uni.getSystemInfo获取到的deviceId改变
  

具体对于本地缓存的使用比较简单，自己可以参考下官网文档使用就行

接下来主要针对vuex状态管理器的心得讲解

话不多说，来人，上源码

1. import Vue from 'vue'
   
2. import Vuex from 'vuex'
   
3. Vue.use(Vuex)
   
4. const store = new Vuex.Store({
   
5.     state: {
   
6.         a1:'',//变量1
   
7.         a2:'',//变量2(不需要更新的值不用定义mutations方法)
   
8.         a3:{},//变量3(更新的值需要二次处理)
   
9.     },
   
10.     mutations: {
    
11.         setVuexData2(state,data){
    
12.             state.a2 = data;
    
13.         },
    
14.         setVuexData3(state,data){
    
15.             state.a3 = data;
    
16.         }
    
17.     },
    
18.     actions:{
    
19.         actionsSetVuexData3({commit},data){
    
20.             return new Promise((resolve, reject) => {
    
21.                 /*二次处理*/
    
22.                 commit("setVuexData3", data);
    
23.                 resolve();
    
24.             });
    
25.         }
    
26.     }
    
27. })
    
28. export default store
    
29. **使用方法**
    
30. 在main.js文件中引入
    
31. import store from './store'
    
32. 把store注册到vue实例上面
    
33. const app = new Vue({
    
34.     store,
    
35.     ...App
    
36. })
    
37. **页面引用**
    
38. //引入vuex
    
39. import {mapState,mapMutations} from 'vuex';
    
40. //提取store.state定义的变量，使用方式this.a1;
    
41. computed: {
    
42.     ...mapState(['a1'])
    
43. },
    
44. //更新值的有两种方式
    
45. //方式一:(通过mapMutations取到vuex里面定义的函数，这个必须放在methods里面，并且是最上面的位置，避免下面自定义的方法无法使用该函数)
    
46. methods: {
    
47.     ...mapMutations(['setVuexData2']),
    
48.     自定义方法(){
    
49.         this.setVuexData2()
    
50.     }
    
51. }
    
52. //方式二:(此方法使用的情况相对比较少，方式一足够满足大部分业务需求)
    
53. let data={}
    
54. this.$store.dispatch('actionsSetVuexData3',data)
    
55. **js文件内部使用**
    
56. 单独引入文件 import store from "@/store/index.js";
    
57. js文件内部使用 store.state.a1
    
58. js文件内部更新 store.commit('setVuexData2','')

复制代码

具体用法上面有注释，不清楚的可以评论区回复

首先在根目录创建个store目录，新建store.js，把上面代码从**使用方法**以上全部复制黏贴，完事


在很长的分割线下面泡着一杯茶，欢迎评论区讨论交流技术

tmdgdx

感谢分享