简介

主要实现了 uniapp 下基于 vuex 的全局数据共享,且做了数据持久化。

路径是 ./store/index.js ,里面有详细的注释说明。 页面间的数据共享也是基于这个模块的,所有页面只需要暴露 state 对象的根节点, 就能快捷的存取了。模块封装了 setStateData 和 initStateData 对象。所有需要 的页面只要引用这2个方法就可以。具体使用方法,请参考本完整项目的各个页面吧。 后续会继续完善这个模块,加入类似 删除节点数据 之类的接口。目前如果要吧某个数据 节点删除,可以设置该键值为 null。


演示地址:

如果需要运行本app演示,需要后端数据支持,一下地址提供了演示数据,启动app后填入地址保存:

http://api.a-vi.com/st

贴上一些使用说明吧:

模块初始化: 由于模块使用uni存储state 数据,每次调用 setStateData 修改节点数据的时候,该 根节点的所有数据都会更新到存储,而每次app启动的时候,都需要调用 initStateData 来从存储读取所有根节点数据到 state 对象进行合并数据,完成初始化,所以,在 app.vue 页面的 onload 需要调用一次 initStateData :

    import {
        mapState,
        mapMutations
    } from 'vuex'   

    export default {
         methods: {
            ...mapMutations(['initStateData'])  //导入state固定的【初始化】接口
        },
        onLaunch: function() {
            //从存储初始化用户的状态管理模块的数据
            this.initStateData();
            console.log('App Launch');
        },
        : function() {
            console.log('App Show');
        },
        onHide: function() {
            console.log('App Hide');
        }
    }

数据的构建: 首先在 ./store/index.js 的state 对象定义需要的根节点变量名,可以做一些初始化。

    const store = new Vuex.Store({
    state: {
        userData:{
            name: '用户数据',
            hasLogin: false,
            initData: {},
            userInfo: {},   
            pickerIndex: {
                departmentID:0,
                teamsID:0,
                scalesID:0,
                FFManagerID:0
            }
        },
        prodData:{
            name: '生产数据',
            qtyList: {}
        },
        appLifeData:{}
    },

其中, appLifeData 变量是固定的,这个变量主要用于页面间临时数据交换,不会被持久化, 也就是app关闭后数据就没了。其他根节点变量都是会持久化的,模块自动会按每个根节点的变量名 作为存储键名,变量值作为键值,这样可以细化数据分块,最大化性能。 (以前我也尝试使用 vuex-persistedstate 这个插件,但是需要 npm 去安装,并且所有存储的 数据都只用 vuex 这个键名,每次小的节点值修改都会存储更新,主要是后来也有bug,所有我才自己 另外写了这个模块),可以任意定义数量和变量名都不限制。


数据的使用: 首先在需要全局数据的地方引用 state 。以下是代码片段:

    import svc from '../../service.js';
    import {mapState,mapMutations} from 'vuex';     //引入vuex

    export default {
        computed: mapState(['prodData','appLifeData']),
        //以上是导入state对象下的根节点变量,按需要,用不到的对象就别导入了。
        data() {
            return {
                postData:{},
                page: 1,
            }
        },
        () {
            //使用
            //一般传入一个数组,第一个值是(字符串类型)根变量名,表示即将设置该根变量下的数据
            //第二个值是具体的节点和需要修改的值(对象类型)。
            //如果省略根变量名,那么就直接传入对象数据,模块会默认对应到第一个根节点变量。
            this.setStateData({
                pickerIndex:{
                    teamsID:12,
                },
                hasLogin: true
            });
            //可以按需要修改任意子节点数据,
            this.setStateData(['appLifeData',{
                myData: '大家好,我是邓伟,我的QQ:215879458',
                myJob:  ['奶爸','码农']
            }]);
            //使用数据:
            console.log( this.appLifeData.myJob );
        },
        methods: {
            ...mapMutations(['setStateData']),  //导入state固定的【设置数据】接口
        }
    }

以下是在模版视图上使用全局数据:

    <view>{{ appLifeData.myData }}</view>
    <view v-for="(v,k) in appLifeData.myJob" :key="k" :info="v">
        {{k}}# {{v}}
    </view>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

拨打电话

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问