Mixin

Vuex1.state的使用首先在src文件夹下面建一个store文件夹作为仓库store里创建一些js文件作为相对应的存储空间例如 store.js import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.store({state: { //状态管理 count: 1},getters: { //获取状态值 getCount: function(state){ return state.count * 5 }},mutations: { //操作状态 add: function(state){ state.count += 1 }},actions: { //异步操作状态 addFun: function(context){ context.commit('add') }}})在vue组件中使用 在插值表达式里 {{$store.state.count}}computed:{count(){return this.$store.state.count}}更新state的值methods: { change(){ this.$store.commit('add',args) //同步操作，可以有选择性的传参 }, asyncChange() { this.$store.dispatch('addFun') //异步操作 }}2.mapState的使用1.在.vue组件中引入,在js块中引入 import { mapState } from 'vuex'2.在.vue组件中使用，一般放在computed里可以监听到状态改变 computed：{ ...mapState([ //mapState本是一个函数，在里面写一个数组，记得加... ‘num’ ， //存的数据 ‘id’ ])}或computed: { ...mapState({ num: (state)=>state.num, //这种用法可以看作为起别名 id: (state)=>state.id })}mapAction的使用正常action的使用this.$store.dispatch('function',args)mapActionimport {mapActions} from 'vuex' methods: {...mapActions(['fun1','fun2','fun3'])或...mapActions({ fun1: 'fun1', fun2: 'fun2' })}mapMutations的使用 //关于传参问题，直接在调用的地方传参正常mutation的使用this.$store.commit('function',args)mapMutations的使用import {mapMutations} from 'vuex'methods:{...mapMutations(['fun1','fun2'])或...mapMutations({ fun1: 'fun1', fun2: 'fun2'})}混入 (mixin)混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。**组件的思想主要是用来解决重复码有相似功能的代码，并使其标准化，统一化，但在前端更多是体现在界面上的视觉效果，如果要实现功能大体相同，界面需要个性化，但又不想传入过多的props怎么办呢这时mixin便有了其用武之地，可以使用相同的js逻辑，template和css自定义就好了** ...

概念Mixin模式就是一些提供能够被一个或者一组子类简单继承功能的类,意在重用其功能。在面向对象的语言中，我们会通过接口继承的方式来实现功能的复用。但是在javascript中，我们没办法通过接口继承的方式，但是我们可以通过javascript特有的原型链属性，将功能引用复制到原型链上，达到功能的注入。 示例下面通过一个简单的例子来演示这个模式 var Car = function(settings) { this.model = settings.model || "no model provided" this.color = settings.color || "no color provided"}var Action = function() {}Action.prototype = { driveForward: function() { console.log("drive forward") }, driveBackward: function() { console.log("drive backward") }, driveSideways: function() { console.log("drive sideways") }}//混入模式的实现function Mixin(recClass, giveClass) { if(arguments.length > 2) { for(var i = 2, lenth = arguments.length; i < lenth ; ++ i) { var methodName = arguments[i] recClass.prototype[methodName] = giveClass.prototype[methodName] } }else { for(var methodName in giveClass.prototype) { if(!recClass.prototype[methodName]) { recClass.prototype[methodName] = giveClass.prototype[methodName] } } }}Mixin(Car, Action , "driveForward", "driveBackward")var myCar = new Car({ model: "BMW", color: "blue"})myCar.driveForward() //drive forwardmyCar.driveBackward() //drive backward//不指定特定方法名的时候，将后者所有的方法都添加到前者里Mixin(Car, Action)var mySportsCar = new Car({ model: "Porsche", color: "red"})mySportsCar.driveForward() //drive forward优缺点优点有助于减少系统中的重复功能及增加函数复用。当一个应用程序可能需要在各种对象实例中共享行为时，我们可以通过在Mixin中维持这种共享功能并专注于仅实现系统中真正不同的功能，来轻松避免任何重复。 ...

注册服务向容器中注册服务// 绑定服务$container->bind(’log’, function(){ return new Log();});// 绑定单例服务$container->singleton(’log’, function(){ return new Log();});扩展绑定扩展已有服务$container->extend(’log’, function(Log $log){ return new RedisLog($log);});ManagerManager实际上是一个工厂，它为服务提供了驱动管理功能。Laravel中的很多组件都使用了Manager，如：Auth、Cache、Log、Notification、Queue、Redis等等，每个组件都有一个xxxManager的管理器。我们可以通过这个管理器扩展服务。比如，如果我们想让Cache服务支持RedisCache驱动，那么我们可以给Cache服务扩展一个redis驱动：Cache::extend(‘redis’, function(){ return new RedisCache();});这时候，Cache服务就支持redis这个驱动了。现在，找到config/cache.php，把default选项的值改成redis。这时候我们再用Cache服务时，就会使用RedisCache驱动来使用缓存。Macro和Mixin有些情况下，我们需要给一个类动态增加几个方法，Macro或者Mixin很好的解决了这个问题。在Laravel底层，有一个名为Macroable的Trait，凡是引入了Macroable的类，都支持Macro和Mixin的方式扩展，比如Request、Response、SessionGuard、View、Translator等等。Macroable提供了两个方法，macro和mixin，macro方法可以给类增加一个方法，mixin是把一个类中的方法混合到Macroable类中。举个例子，比如我们要给Request类增加两个方法。使用macro方法时：Request::macro(‘getContentType’, function(){ // 函数内的$this会指向Request对象 return $this->headers->get(‘content-type’);});Request::macro(‘hasField’, function(){ return !is_null($this->get($name));});$contentType = Request::getContentstType();$hasPassword = Request::hasField(‘password’);使用mixin方法时：class MixinRequest{ public function getContentType(){ // 方法内必须返回一个函数 return function(){ return $this->headers->get(‘content-type’); }; } public function hasField(){ return function($name){ return !is_null($this->get($name)); }; }}Request::mixin(new MixinRequest());$contentType = Request::getContentType();$hasPassword = Request::hasField(‘password’);