mixins实现逻辑复用

顾辰逸you2025-09-04 10:04

在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函数来实现逻辑复用的。