代码管理
每天早上更新一下代码git pull
vuex的学习
vuex的了解
Vuex是一个专门为vue.js应用程序开发的状态管理模式。
状态管理模式，包括以下几个部分
state：驱动应用程序的数据源
view：以声明的方式将state映射到视图
actions:响应在view上的用户输入导致的状态变化
image.png
每一个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，然后在父组件中拿到子组件，进而操作子组件的方法
网友评论