Vuex
1.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自定义就好了**
具体使用：
先在src下建一个文件夹mixin
然后在该文件夹下创建你需要按功能取名的js文件
例如common.js
const toggle = { //你需要引入哪些就加哪些data(){return {}},created(){},methods:{} ... //还可以添加 }export toggle在.vue文件中使用
import { toggle } from '@/mixin/common.js'export default {mixins: [toggle]}注意：如果混入里的东西和组件内的有冲突，会使用组件内的，欲安内必先攘外
全局混入
在main.js中定义
Vue.mixin({ created: function () { } ... // 省略})