vuex学习/vue组件

代码管理

每天早上更新一下代码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，然后在父组件中拿到子组件，进而操作子组件的方法