代码管理
每天早上更新一下代码git pull
vuex的学习
vuex的了解
Vuex是一个专门为vue.js应用程序开发的状态管理模式。
状态管理模式,包括以下几个部分
state:驱动应用程序的数据源
view:以声明的方式将state映射到视图
actions:响应在view上的用户输入导致的状态变化
每一个Vuex应用的核心及时store(仓库)。store基本上就是一个容器,它包含着你的应用中大部分的状态(state)。
store.state来获取状态对象,以及通过store.commit方法触发状态变更
通过提交 mutation 的方式,而非直接改变 store.state.count,是因为我们想要更明确地追踪到状态的变化
mapState辅助函数
大概使用:
computed:mapState({
count:state => state.count
})
store.state.orderList 映射this.orderList
store对象的使用
store.state.count
vuex通过store选项,提供了一种机制将状态从根组件“注入”到每一个子组件中(需要调用vue.use(Vuex)):
const app = new Vue({
el: '#app',
// 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
store,
components: { Counter },
template: `
<div class="app">
<counter></counter>
</div>
`
})
通过根实例中注册store选项,该store实例会注入到根组件下的所有的子组件中,而且子组件能够通过this.$store访问到
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
个人理解:store中的state相当于vue实例中的data,store中的getter相当于vue实例中的一个computed
mutation
更改Vuex的store中的状态的唯一方法就是提交mutation。
要唤醒一个mutation handler,你需要以相应的type调用store.commit方法
store.commit('increment')
每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)
可以使用常量替代Mutation事件类型
mutation一定要是同步函数
vue的响应规则
1.最好提前在你的store中初始化好所有的属性
2.添加新属性的时候,使用Vue.set(obj,'newProp',123)
或者以老对象替换老对象,对象扩展符 state.obj = { ...state.obj, newProp: 123 }
action
Action函数接受一个与store实例具有相同方法和属性的context对象,因此你可以调用context.commit提交一个mutation,或者通过context.state和context.getters来获取state和getters
Action通过store.dispatch方法触发
store.dispatch('increment')
个人理解:
dispatch——>action——>mutation——>state——>view
之所以使用store.dispatch,是因为mutation必须同步,但是要在action执行异步操作的时候,就需要用到store.dispatch
个人理解:组件中computed中的状态,通过mapGetters映射到store中的数据的状态。
组件中methods中的方法,通过mapActions映射到store中暴露出去的事件
箭头函数
组件
全局注册
使用components进行局部注册
slot
具名插槽
作用域插槽
注意,在父级中,具有特殊特性的slot-scope的template元素必须存在,表示它是作用域插槽的模板。slot-scope的值作为一个临时变量名,此变量接受从子组件传递过来的prop对象。
父组件与子组件之间的通信
子传父
使用$emit和$on
父传子
通过prop
slot
父组件怎么使用到子组件的方法呢?可以使用ref指定组件ID,然后在父组件中拿到子组件,进而操作子组件的方法