mixins实现逻辑复用

在vue2项目中,如果多个组件中需要复用相同的逻辑(如:数据、方法、生命周期钩子等)时,可以使用mixins实现逻辑复用。

一、在根目录src文件夹下创建mixins文件夹,用于存放复用逻辑函数。

二、然后封装好了用于复用的逻辑函数时,再到要使用该逻辑功能的组件中去引入。

eg:验证是否登录的功能逻辑,一般都是被多个组件复用的,因此可以把验证用户是否登录的逻辑封装成一个mixins函数。

mixins/loginConfirm.js:

php 复制代码
export default {
  methods: {
    // 是否需要弹登录确认框
    // (1) 需要,返回 true,并直接弹出登录确认框
    // (2) 不需要,返回 false
    loginConfirm () {
      if (!this.$store.getters.token) {
        this.$dialog.confirm({
          title: '温馨提示',
          message: '此时需要先登录才能继续操作哦',
          confirmButtonText: '去登陆',
          cancelButtonText: '再逛逛'
        })
          .then(() => {
            // 如果希望,跳转到登录 => 登录后能回跳回来,需要在跳转去携带参数 (当前的路径地址)
            // this.$route.fullPath (会包含查询参数)
            this.$router.replace({
              path: '/login',
              query: {
                backUrl: this.$route.fullPath
              }
            })
          })
          .catch(() => {})
        return true
      }
      return false
    }
  }
}

由于一般是通过vuex分模块去管理组件中用到的数据,因此,登陆后的用户数据往往是利用store/modules/user.js模块去管理登录数据。

然后为了方便其他组件中也可以访问到用户的登录数据,可以把该数据引入到store/index.js文件中,便于共享数据。

php 复制代码
import user from '@/store/modules/user'

export default new Vuex.Store({
  state: {
  },
  getters: {
    // 配置全局的token
    token (state) {
      return state.user.userInfo.token
    }
  },

  mutations: {
  },
  actions: {
  },
  modules: {
    user
  }
})

所以在mixins/loginConfirm.js中获取token数据,直接通过 this.$store.getters.token即可。

在vue3项目中是通过自定义封装hook函数来实现逻辑复用的。

相关推荐
llq_3509 小时前
peerDependencies(对等依赖)
前端
一刻缱绻9 小时前
Mixed Content 问题及解决方案详解
前端·浏览器
鹏程十八少9 小时前
9. Android <卡顿九>解剖Matrix卡顿监控:微信Matrix源码深度分析解读(卡顿原理)
前端
我想说一句9 小时前
双Token机制
前端·前端框架·node.js
怪可爱的地球人9 小时前
Symbol符号是“唯一性”的类型
前端
月亮慢慢圆9 小时前
cookie,session和token的区别和用途
前端
郭邯9 小时前
vant-weapp源码解读(3)
前端·微信小程序
golang学习记9 小时前
从0 死磕全栈第3天:React Router (Vite + React + TS 版):构建小时站实战指南
前端
Dream耀9 小时前
Promise静态方法解析:从并发控制到竞态处理
前端·javascript·代码规范