- 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']),
- 数据存储仓库：state：存放数据状态，不可以直接修改里面的数据
- getters：类似vue的计算属性，用来过滤一些数据，与computed结合使用
- 方法的第一个参数是state
getNum(state){ // 获取器离state很近，可以直接拿来用
return state.num
}
// 组件中使用
computed:{
getMyNum(){
return this.$store.getters.getNum
}
}
- 方法的第一个参数是state
- mutations：动态修改vuex的store中的状态或数据 - 增、删、改
-
定义：里面的方法，第一个参数是state指向数据仓库，后面的参数是传入的数据；操作只能是同步的，否则可能丢失记录；组件中通过commit来调用
mutations:{
addNum(state){
state.num++
},
}this.$store.commit('addNum') //使用commit调用仓库的方法，写在methods函数中
-
- actions：通过将mutations里面处理数据的方法，变成可以异步处理数据的方法，通过store.dispath来分发action
- 有可能去发送请求，存在异步行为
// store.js中
actions:{
//store.dispatch('addByNumAction',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：在引入组件后与组件的对象方法进行合并，扩展了组件的对象和方法，形成新的组件
