vuex 添加全局数据和使用(业务:vue将码表数据设为全局,进行调

作者:神秘网友 发布时间:2020-09-27 07:31:41

vuex 添加全局数据和使用(业务:vue将码表数据设为全局,进行调

vuex 添加全局数据和使用(业务:vue将码表数据设为全局,进行调用)

原来调用码表都是直接在页面或者组件中直接调用,但是由于本次需求调用的数据又多又杂,数据加载量达到 10M 多,页面加载就异常的慢。还有组件中也都需要用到,为了不重复调用接口,加重服务压力,决定使用 VueX 进行处理。

> 由于之前没接触过 vuex ,所以今天认真的看了一遍官网。https://vuex.vuejs.org/zh/ 
> 由于理解能力较差,翻阅了一位博主的文章进行参考。如果和我一样基础较差的,可以参考一下;
> https://www.cnblogs.com/mica/p/10757965.html
> 本次为学习记录,如有错误,请大家指正。

第一步

根据官网项目规范,在 src 目录下 创建 store 文件夹及以下文件,如下图。在 modules 中创建业务文件 xxx.js,我这使用 getDicts.js 作为案例。
vuex 添加全局数据和使用(业务:vue将码表数据设为全局,进行调

第二步(store/index.js)

vuex 添加全局数据和使用(业务:vue将码表数据设为全局,进行调

第三步 (main.js中挂载)

vuex 添加全局数据和使用(业务:vue将码表数据设为全局,进行调

第四步

由于只需要在初始的时候调用一次服务器,后期就只要使用,我就在Home.vue中调用。
home.vue为我主业务页的公共页面。

 mounted() {
      this.getDicts();//全局码表设置
    },
 methods: {
      //调用获取码表接口,util.getDicts  接口方法,根据自己的接口定义
      getDicts(){
         util.getDicts([
          "bc_registerType", //登记类型
          "GF2009_00004", //国籍
          "GF2009_00015", //证件种类
          "GF2009_00005", //民族
          "up_sex", //性别
          "GF2009_00006", //文化程度
          "GF2009_00022", // 职业
          "GF2009_00016", // 身份
          "up_whether", //是否
        ]).then((res) => {
        //============主要部分=============
          this.options = res.data
          this.$store.dispatch("getDictsAction",this.options)
          //==========主要部分-结束==============
        })
      }
      }

第五步(getDicts.js)

大家请根据自己的业务需求进行调整。

const getDicts = {
    state: { //设置全局访问的 state 对象,与初始值
        dictsData:{} //可以想成在 store.state下定义一个变量
    },
    getter: { //实时监听 state 值的变化并进行返回
        getDicts: dictsData => {
            return state.dictsData;
        }
    },
    mutations: { //修改 store 中的值唯一的方法
        ADD_DICTS (state,val){
            console.log("mutations",val);
            state.dictsData=val; //设置值
        }
    },
    actions: { //action 提交到 mutations ,不直接变更状态 ,【可异步操作】
        getDictsAction(context, val){
            context.commit('ADD_DICTS',val)  // ADD_DICTS 为 murations 中的方法名
        }
    }
}
export default getDicts;

第六步 页面中使用方式

通过 this.$store.state.getDicts.dictsData 获取数据。

实际问题

由于码表数据较大,页面已经展现,而我在data中赋值的数据就出不来了,通过切换菜单,发现只要一开始刷新的页面出不来数据。
解决方式:通过监听来二次赋值

  "$store.state.getDicts.dictsData":{
        handler: function (val){
          this.options=this.$store.state.getDicts.dictsData;
        }
      }

vuex 添加全局数据和使用(业务:vue将码表数据设为全局,进行调相关教程

  1. Zabbix监控(二)添加触发器Triggers

    Zabbix监控(二):添加触发器Triggers 1、新建触发器Triggers: 说明:上图中显示的触发器是在Template中创建的,触发值是不能在此直接修改的,必须在template中修改。 点击ADD添加触发器表达式Expression: 点击Select选择已存在监控项Items: 说明:Expressi

  2. Zabbix监控(一)添加主机Host和监控项Items

    Zabbix监控(一):添加主机Host和监控项Items 一、添加监控主机Host 1、默认已添加Zabbix服务器本机,对自身状态进行监控,应用了Linux和Zabbix Server两个模板: 2、点击右侧的Creat host添加监控主机,Groups可在右侧选择一个或在New group中创建一个: 3、

  3. Qt添加菜单栏和工具栏

    Qt添加菜单栏和工具栏 目录 文章目录 Qt添加菜单栏和工具栏 版本说明 目录 一、需求与目的 二、详细说明 三、最后 一、需求与目的 一般常规的PC软件都会有主窗口,主窗口中都会有菜单栏和工具栏,例如我们正在使用的Qt creator: 所以,工具栏和菜单栏的制作

  4. unity的 sprite renderer Component 添加preview功能2

    unity的 sprite renderer Component 添加preview功能2 之前写的代码破坏了sprite renderer 的布局,所以结合雨松大佬的文章:Unity3D研究院编辑器之不影响原有布局拓展Inspector(二十四) 作出修改: ,需要继承DecoratorEditor 类, 同时对该类进行微调 ,只需要

  5. linux添加用户切换后显示-bash4.1$的解决办法

    linux添加用户切换后显示-bash4.1$的解决办法 昨晚通过练习发现添加用户后切换用户时发生了-bash4.1$的问题,通过各种对比user、group、rwx等等 最后在sun老师的提点下对比了家目录的隐藏文件,发现如下图结果 userb的家目录下没有环境变量的隐藏文件。 于是

  6. 2020-09-24

    2020-09-24 nuxt下全局引用scss 两种方式: 1、在nuxt.comfig.js中直接引入(不支持@mixin等) 2、安装@nuxtjs/style-resources (支持@mixin) npm i @nuxtjs/style-resources --save 在nuxt.config.js中增加一下代码 export default { modules: ['@nuxtjs/sty

  7. eclipse下hibernate向数据库添加数据

    eclipse下hibernate向数据库添加数据 首先我们需要了解什么是hibernate框架。hibernate框架应用于JavaEE三层结构的dao层,主要实现对数据库的crud操作。 1. 创建项目并导入需要的jar包 首先我们创建一个java项目,命名为Hibernate_Practice右键项目,选择new

  8. gpt分区 添加vhd引导_如何在不进行重新分区的情况下双重引导Wind

    gpt分区 添加vhd引导_如何在不进行重新分区的情况下双重引导Windows 7和8(使用VHD)... gpt分区 添加vhd引导 ( Creating The VHD ) To create the VHD, go to a run prompt by pressing Win+R, and type diskmgmt.msc. 要创建VHD,请按Win + R进入运行提示