关于使用Vue mixins的一个小场景

最新推荐文章于 2025-12-15 16:29:09 发布

原创最新推荐文章于 2025-12-15 16:29:09 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #前端框架

文章介绍了如何使用Vue的mixins功能来实现组件的复用，特别是结合Vuex进行公共状态管理，以控制底部导航栏tabbar在不同组件中的显示和隐藏。通过在混入对象中定义生命周期钩子，自动处理tabbar的状态，在组件的mounted和destroyed阶段与Vuex的mutations交互，简化了代码并提高了效率。

Vue mixins是Vue中的一个混入用法，我们可以定义一个混入对象，里面可以包含生命周期函数和方法，可以在任何组件中导入进行混入，达到复用的效果。基础用法如下：

// 在mixinObj.js中书写如下代码：
const mixObj = {
  mounted () {
    // your code here...
  },

  created () {
    // your code here...
  },

  methods: {
    // 定义方法
  }
}

// 导出
export default mixObj


// 在你想使用此混入对象的组件中导入并使用
import mixinObj from '@/你的路径/mixinObj.js'

export default {
  mixins: [mixinObj],

  data () {
    return {
    // ...
    }
  },

  methods: {
  // ...
  }
}

可能这个用法的实际应用场景不是很多，下面介绍我自己实际应用的一个小场景：

有一个移动端的底部导航栏tabbar，想实现在视图级组件中显示，在其他子组件中隐藏，一个一个的进行显示隐藏会重复地写很多代码，很不方便，而使用mixins结合vuex的公共状态管理是非常简单省力的。

具体做法：

在store\index.js中的state中定义一个状态isTabbarShow，默认为true，在mutations中定义两个方法分别管理isTabbarShow的显示隐藏状态：

state: {
  isTabbarShow: true
},
mutations: {
  // 显示tabbar
  showTabbar (state) {
    state.isTabbarShow = true
  },

  // 隐藏tabbar
  hideTabbar (state) {
    state.isTabbarShow = false
  }
}

在mixinObj.js中书写如下代码：

const mixObj = {
  mounted () {
    // 一进来就提交hideTabbar调用，隐藏tabbar
    this.$store.commit('hideTabbar')
  },

  destroyed () {
    // 离开时显示
    this.$store.commit('showTabbar')
  }
}

export default mixObj

在想要进行隐藏tabbar的组件中混入此对象，此对象中的代码会自动混入组件中

最后，在根组件App.vue中使用v-show控制tabbar的显示隐藏：

<!-- 根据组件需要改变tabbar的显示隐藏 -->
<tab-bar v-show="$store.state.isTabbarShow"></tab-bar>

大功告成！