首页 > 其他分享 >(自用)vuex的使用,getters,actions声明与使用

(自用)vuex的使用,getters,actions声明与使用

时间:2022-10-10 17:37:08浏览次数:40  
标签:arr obj getters actions element state let key vuex

import request from "@/api/Interface.js";

//schema转json
function schemaToTableData(modelData) {
  let dfs = (val, tableData) => {
    for (let key in val) {
      let element = val[key];
      let obj = {
        id: key,
        key: key,
        type: element.type,
        desc: element.description ? element.description : key,
        info: element.type,
      };
      if (element.properties) {
        obj.children = [];
        dfs(element.properties, obj.children);
      } else if (element.items) {
        obj.info = element.type + `[${element.items.type}]`;
        if (element.items.properties) {
          obj.children = [];
          dfs(element.items.properties, obj.children);
        }
      }

      tableData.push(obj);
    }
  };
  let arr = [];
  dfs(modelData, arr);
  return arr;
}

const flushTime = 30 * 1000; //数据缓存时间

const state = {
  tableModelList: [],
  timestamp: new Date().getTime() - flushTime,
};

const getters = {
  schemaToTableData: (state) => (tableId) => {
    let arr = state.tableModelList.filter((item) => {
      return item.tableId === tableId;
    });
    return arr.length > 0 ? schemaToTableData(arr[0].properties) : [];
  },
};

const mutations = {};

const actions = {
  async fetch({ state }, forceRefresh = false) {
    let n = new Date().getTime();
    if (forceRefresh || n - state.timestamp > flushTime) {
      let res = await request.tableModelList();
      state.tableModelList = res.data.rows;
      state.timestamp = n;
    }
  },
};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
};


...mapState("tableModel", ["tableModelList"]),

this.$store.getters["tableModel/schemaToTableData"](id)

...mapActions("tableModel", { tableModelFetch: "fetch" }),

标签:arr,obj,getters,actions,element,state,let,key,vuex
From: https://www.cnblogs.com/yoona-lin/p/16776510.html

相关文章

  • 聊聊Vuex原理
    背景Vuex是一个专为Vue.js应用程序开发的状态管理模式。Vuex是专门为Vue.js设计的状态管理库,以利用Vue.js的细粒度数据响应机制来进行高效的状态更新。如果你已......
  • vuex使用
    概述1、概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信......
  • 详解vue-element-admin之模块化Vuex
    最近项目要储备vue-element-admin,于是吧官方的demo拿来研究了一段时间~在这段期间内完成了一个自制的小项目,近期会上线(vue-element-admin后台+uniapp制作的小程序),请期待~......
  • vuex中两个用法
    在vuex中可以使用辅助函数和this.$store.state.xxxx两个用法vue3用的vuex为4版本,vue2用的vuex则为vuex的3版本因为在vuex中,vue开发者工具监听的是mutations的事件改值,mut......
  • vuex中commit
    一、不使用模块的基础模式看vuex相关的文件夹,放在src下的store文件夹,里面有一个index.js文件,为vuex的入口,如果不使用模块,可以将所有相关代码写在index.js文件里面,下面是最......
  • Vuex与前端表格施展“组合拳”,实现大屏展示应用的交互增强
    Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。下图是一个产品开发......
  • h5:vue3 + ts + vite + vuex + axios + vant4 + scss + postcss+mockjs+element-plus
    模板地址:https://gitee.com/zhang_meng_lei/mobile-template-h5-vue3/tree/master安装element-plus:yarnaddelement-plus(目前已导入但未实现代码)按需导入:https://el......
  • Vuex
    Vuex概念Vuex是一个专为Vue.js应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。(响应......
  • vuex从后端获取data
    //store.jsimport{createStore}from"vuex";importaxiosfrom"axios";conststore=createStore({state(){return{merchants:[]......
  • vue3的vuex简单配置
    vuex目录文件内容【store/index.js】import{createStore}from"vuex";importmodulesfrom"./modules";constsetupStore=(app)=>{letstoreOptions......