vue和vuex（原创）

其实中文文档已经写的很详细了，但还是想从头到尾写一下，加入些自己的理解。

vue大家已经很熟悉了，一般中小项目可以不使用vuex对data进行状态管理。

vue我认为几个比较重要的点：

1、组件和自定义组件

2、父、子组件间数据的传递

官网原话：在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop给子组件下发数据，子组件通过事件给父组件发送消息。

3、非父子组件间通信（使用一个空的 Vue 实例作为事件总线）

4、生命周期

5、路由

6、自定义事件

其他模版、渲染、绑定等看官网都很好理解。

展开几点概况一下：

几个生命周期钩子方法详解：

• beforecreate : 组件实例刚被创建，data等属性还没开始计算。可以在这加个loading事件，在加载实例时触发
  
• created : 实例创建完成，但是dom还未生成。初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
  
• mounted : 挂载元素，获取到DOM节点
  
• updated : 更新组件。如果对数据统一处理，在这里写上相应函数
  
• beforeDestroy : 可以做一个确认停止事件的确认框
  
• nextTick : 更新数据后立即操作dom
  

计算属性和观察者区别（计算属性computed vs method方法）

• 基本功能相同
• 但是computer基于依赖进行缓存的。如果data没有变化，返回以前缓存的结果。不用重新执行方法。
• 好处是：如果某个值不需要重复计算，并且这个计算逻辑很复杂，要做大量的计算，缓存就派上用场了
• method每次渲染都会重新执行定义的函数

加载顺序上也有些区别

• computed是在HTML DOM加载后马上执行的，如赋值；
• 而methods则必须要有一定的触发条件才能执行，如点击事件；

vuex

使用vuex要权衡利弊，会增加代码量、size。主要有以下几个核心概念

state

Vuex 应用的核心就是 store，包含着你的应用中大部分的状态(state)，将state从根组件注入到每一个子组件中。通过this.$store访问

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
• 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

Getters

store 的计算属性，类似vue的计算属性。返回值会根据它的依赖被缓存起来

mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性

Mutations

更改store 中的状态的唯一方法是提交 mutation，store.commit('increment')

Actions

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• 通过store.dispatch触发。
• 与mutations最大区别是： mutation 必须同步执行，Action 可以异步执行

modules(模块)

store对象可能会很臃肿，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter

实际中我觉得使用action即可，mutation可以使用action代替。都可以用异步执行来改变状态。

一些代码示例：

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

export default {
  name: 'hello',
  data () {
    return {
      msg: 'hello'
    }
  },

  created: function () {
      this.msg = "wolrd"

  },

  computed: {
      ...mapState(["count","name"]),
      count(){
          return this.$store.getters.counter;
      }
  },

  methods: {
      ...mapMutations([  
          'add','reduce'
      ]),

      ...mapActions([
          'addAction',
          'reduceAction'
      ])
  },
}
复制代码

mutation-type.js

export const ADD = 'ADD'
export const REDUCE = 'REDUCE'
复制代码

modules

import * as types from '../mutation-types'

const state = {
    count: 1,
    name: '吹风机'
}

// 计算state
const getters = {
    counter:function(state){
        return state.count +=100;
    }
}

// 同步事件，可不用
const mutations={
    [types.ADD](state,n){
        state.count+=n;
    },
    reduce(state){
        state.count-=1;
    }
}

// 异步事件
const actions ={
	// 两种写法
    addAction(context){
        context.commit(types.ADD,10)
    },

    // 常用
    reduceAction({commit}){
        commit('reduce')
        //setTimeout(()=>{commit('reduce')},1000); //异步模拟
    }
}

export default({
    state,
    getters,
    actions,
    mutations
})
复制代码