vue mixins使用体验

以前只在项目中见到过mixins，因为用到的地方不多所以没有去记录。最近的项目中每个页面都需要保存每次查询时的条件以便在路由重新加载时使用，开始并没有想到，前天突然有了想法，就尝试着试了一下。
首先要了解mixins是干什么的，它是一个混入的对象，结构和咱们平时vue页面中的script中的内容基本一样。

export const mymixins = {
	methods: {
		// 同methods
	},
	data() {
		return {
			//同data
		}
	},
	created() {
		// 同created
	},
	//....
}

这就是一个mixins文件了，使用也很方便。

import { mymixins } from '@/components/mixins/mymixins'
export default {
	mixins: [mymixins],
	//...
}

这就把mixins引入进来了。

但是我一直不清楚它的作用到底是什么，最近那个需求给了我灵感，每个页面路由重新加载时都要去保存请求条件供下次使用，就需要每个页面在组件销毁前把查询的list存起来，而所有页面基本都使用的’listquery’作为查询对象，所以统一引入mixins去存会方便很多，而且mixins每个组件间是互不影响的。

export const mymixins = {
  methods: {
    finalCart() {
      this.listQuery?window.sessionStorage.setItem('listQuery',JSON.stringify(this.listQuery)):null
    }
  },
  created() {
    if (window.sessionStorage.getItem('listQuery')) {
      this.listQuery?this.listQuery = JSON.parse(window.sessionStorage.getItem('listQuery')):null
      window.sessionStorage.removeItem('listQuery')
    }
  },
  beforeDestroy() {
    this.finalCart()
  },
}

这样在销毁前调用finalcart把listquery存起来，组件重新加载后去重新赋值即可。
总结起来感觉就是mixins在许多组件需要做相同的事情，且数据结构相似的时候，可以通过公用一个方法来实现，可能还有其他会使用的地方，目前我认为最有效的用途是这种，以后遇到再做记录。相比起子组件，不需要通过组件那样注册和传值，而且内部不管data、methods等都通用，在这样的情况下更适合使用mixins。