vuex结合mixin减少重复代码

什么是 vuex

官方文档：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

我们可以简单的认为：vuex就是一个所有组件都可以读取的全局‘‘数据库’’。每个局部组件是有自己单独的作用域的，非父子组件之间是没法相互传递数据的，所以vuex提供了更为简单的方法。
这就是一个完整的vuex文件，通常会在scr目录下创建store/index.js（基于vue-cli3）

export default {
    state,
    mutations,
    actions,
    getters,
    modules
}

state：
就是数据源，在这里设置我们需要的数据，每个组件都可以使用这个数据，通过 this.$store.state.数据名 使用该数据
mutations：
我们不能直接修改state中的数据，而要通过mutations中定义的方法去修改state中的数据，因为vue提供了Devtools工具来追踪每个state的改变 Devtools.

mutations:{
//一共有两个参数  第一个参数是state，他可以获取state中的数据，第二个参数是payload，调用时传递的参数
	SET_NAME(state,name) {
		state.name = name
	}
}
//使用：
this.$store.commit('SET_NAME',payload);

actions：主要处理mutations中的复杂的逻辑，并且调用mutations中的方法。

actions:{
	setName({ state,commit },payload) {
	//使用renturn会返回一个promise对象 调用时可以继续回调
		 return	this.commit('SET_NAME',payload)
	}
}
//使用
this.$store.dispatch('SET_NAME',payload)

getters：是一个纯函数，接收参数 state，返回你想取的值。我们可以利益{mapGetters}来简化state的使用

getters：{
	name: state => state.name 
}
//使用 
import { mapGetters } from 'vux';
export default {
	computed:{
		...mapGetters(['name'])
	}
}
//通过mapGetters就可以在组件中直接通过this.name调用state中的name属性，省略了this.$store.state大大减少了代码量。{ mapState }也有相同的功能，使用{ mapGetters } 的原因是 getters可以操作数据，而state只能引用数据不能对数据进行简单的操作。

mixin

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
我们可以理解为 在nixin中定义的所有 data、computed、methods等等的new Vue()实例的option时，当我们在组件引用mixin时，会自动的将这些属性写入到当前组件的各自的属性中，并且为了避免冲突会以特定的方式进行合并。混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

根据上面的vuex代码，我们可以结合mixin进行混入，减少非常多的重复代码，并且可以实现组件的通信。
通常会在 /src/utils/mixins.js 创建mixins

	import { mapGetters, mapActions } from 'vuex'
export default {
    //1.mapGetters
    computed:{
        ...mapGetters([
            'name',
  		  ])
    },
    //2.mapActions
    methods:{
        ...mapActions([
            'setName', 
        ])
    }
}
//在组件中使用：
export default {
	 mixins:[eBookMixin],
}
//此时我们就直接可以通过 this 调用vuex中的属性或者方法了。