Vuex全局码表mixins配置

简介: Vuex全局码表mixins配置

dicts.js mixins文件

//src\store\modules\dicts.js

import { getDictParamTableBatch } from '@/api/common/index'
import store from '@/store'
import Vue from 'vue'
class Dict {
  constructor(dict) {
    this.dict = dict
  }

  async init(names) {
    const ps = []
    const hash = {}
    names.forEach((name) => {
      if (store.getters.dicts[name]) {
        Vue.set(this.dict, name, store.getters.dicts[name])
      } else {
        Vue.set(this.dict, name, [])
        hash[name] = name
      }
    })
    const dictCodeList = Object.keys(hash).map(v => hash[v])
    ps.push(
      getDictParamTableBatch({ dictCodeList }).then((res) => {
        res.data.forEach(item => {
          this.dict[item.dictCode] = Object.freeze(item.dictParamTables)
          store.commit('dicts/SET_DICTS', {
            label: item.dictCode,
            value: Object.freeze(item.dictParamTables)
          })
        })
      })
    )
    await Promise.all(ps)
  }
}

const install = function(Vue) {
  Vue.mixin({
    data() {
      if (
        this.$options.dicts instanceof Array &&
                this.$options.dicts.length > 0
      ) {
        return { dict: {}}
      } else {
        return {}
      }
    },
    created() {
      if (
        this.$options.dicts instanceof Array &&
                this.$options.dicts.length > 0
      ) {
        new Dict(this.dict).init(this.$options.dicts)
      }
    }
  })
}

export default { install }

在main.js里面注册mixins

// 全局字典
import dict from '@/mixins/dicts.js'
Vue.use(dict)

getters里面定义

  dicts: state => state.dicts.dicts

页面中使用

  computed: {
    ...mapGetters(['dicts'])
  },
  dicts: ['bab005', 'bab007'],
  watch: {
    dict(v) {
      console.log(v)// 建议使用
    }
  },
  async mounted() {
    // 取值 this.dict['bab005'] 就能取到该字典
    const timer = setTimeout(() => { // 不推荐使用。网络差时会出现问题
      clearTimeout(timer)
      console.log(this.dict['bab005'])
    }, 1500)
  },
  methods: {
    // 详情
    detailClick() {
      this.isVisible = true
    },
    codeClick() {
      // 取值 this.dict['bab005'] 就能取到
      console.log(this.dict['bab005']) // 1.直接获取全局变量dict里面的
      console.log(this.dicts) // 2.取mapGetter里面的
      console.log(this.$store.getters.dicts) // 3.取store仓库getters里面的
    }
  }
相关文章
|
JavaScript 前端开发 索引
69Vue - 子组件索引
69Vue - 子组件索引
38 0
|
2月前
|
存储 JavaScript
vue——store全局存储
【10月更文挑战第18天】Vuex 是 Vue.js 应用中非常重要的一个工具,它为我们提供了一种有效的状态管理方式。通过合理地使用 Vuex,我们可以更好地组织和管理应用的状态,提高应用的开发效率和质量。
64 1
|
2月前
|
JavaScript 索引
如何在 Vue 中动态地添加或删除 Mixin
【10月更文挑战第18天】通过以上的分析和探讨,相信你对如何在 Vue 中动态地添加或删除 Mixin 有了更深入的理解。在实际开发中,你可以根据具体的需求和场景,灵活运用这些方法,以实现更加灵活和高效的应用开发。
39 4
Vue3组件,注册全局组件和局部组件
Vue3组件,注册全局组件和局部组件
|
7月前
|
JavaScript 开发者
混入Mixins:如何使用Mixins复用Vue组件逻辑
【4月更文挑战第24天】Vue.js应用的可维护性和可扩展性关键在于逻辑复用。Mixins提供了一种复用代码的高效方式,避免了组件继承导致的复杂性。Mixins是共享Vue组件选项的对象,可在多个组件间使用。创建Mixin后,通过`mixins`选项将其混入组件。当面临命名冲突时,需确保选项唯一或处理合并逻辑。Mixins还可用于条件渲染,帮助分解组件逻辑,提升代码可读性和可维护性。在开发中应根据需求灵活运用Mixins。
42 0
|
7月前
|
JavaScript
描述 Vue 中的组件注册和全局/局部组件的区别。
描述 Vue 中的组件注册和全局/局部组件的区别。
141 0
|
7月前
|
存储 JavaScript
Vue3使用Pinia获取全局状态变量
Vue3使用Pinia获取全局状态变量
257 4
|
JavaScript
Vue 全局导入 JS 方式以及对 ClassName 进行增删扩展
Vue 全局导入 JS 方式以及对 ClassName 进行增删扩展
83 0
|
7月前
|
JavaScript
vue中父组件怎么调用子组件
vue中父组件怎么调用子组件
|
7月前
|
JavaScript
Vue定义全局组件的三种方式
Vue定义全局组件的三种方式
50 0

热门文章

最新文章