vuex、mixin

• vuex状态管理

用来读取的状态集中放在store中；改变状态mutations（同步的）；异步逻辑封装在action中；在mian.js引入store

场景：登录状态、加入购物车、单页面应用、组件之间的状态

5个组成

import {mapState, mapGetters, mapMutations，mapActions} from 'vuex'

mapState, mapGetters在computed里接收：...mapState(['hasLogin', 'account', 'target', 'shareFrom']),

mapMutations，mapActions在methods里接收：...mapMutations(['saveShareFrom', 'targetMember']),

1. 数据存储仓库：state：存放数据状态，不可以直接修改里面的数据
2. getters：类似vue的计算属性，用来过滤一些数据，与computed结合使用
   • 方法的第一个参数是state
     getNum(state){ // 获取器离state很近，可以直接拿来用
     return state.num
     }
     // 组件中使用
     computed:{
     getMyNum(){
     return this.$store.getters.getNum
     }
     }
3. mutations：动态修改vuex的store中的状态或数据 - 增、删、改

   • 定义：里面的方法，第一个参数是state指向数据仓库，后面的参数是传入的数据；操作只能是同步的，否则可能丢失记录；组件中通过commit来调用
     mutations:{
     addNum(state){
     state.num++
     },
     }

     this.$store.commit('addNum') //使用commit调用仓库的方法，写在methods函数中
     

4. actions：通过将mutations里面处理数据的方法，变成可以异步处理数据的方法，通过store.dispath来分发action
   • 有可能去发送请求，存在异步行为
     // store.js中
     actions:{
     // store.dispatch('addByNumAction',5)
     }
5. modules：项目特别复杂时，可以让每一个模块拥有自己的state、mutation、action、getters，使得结构清晰，便于管理

• mixin混入

分发vue组件中可复用功能的灵活方式；可以定义的修改不会相互影响

// 定义
export const myMixin = {
    data () {
        return{
            num: 1
        }
    },
    created (){
        this.hello();
    },
    methods:{
        hello(){ /* ... */ }
    }
}
// 混入到当前组件中
import {myMixin} from '@/xxx/mixin.js'
export default {
    mixins: [myMixin],
}
// 全局混入：Vue.mixin({...})

区别于vuex：vuex用于状态管理，定义的变量在每个组件中均可修改，并且修改的值会改变

区别于公共组件：

• 组件：在父组件中引入组件，相当于在父组件中给出独立空间给子组件使用，然后根据props传值，相对独立
• mixin：在引入组件后与组件的对象方法进行合并，扩展了组件的对象和方法，形成新的组件