props 和 vuex

1、props

props使用时不区分大小写，可以直接以数组形式写key值[name, age]; 更具体来说还可以定义以下内容type required default 自定义验证函数

// 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }

2、vuex

vuex 有五个模块：state getters mutations actions moudles

• vuex有当刷新页面时数据丢失的问题，这是因为刷新时js会重新加载执行，数据回到初始化状态，这时我们可以结合缓存和远程请求的方式还原数据。

state

state用于存放数据，任何页面都可以使用这些数据，代码this.$store.state.data，通过mapState可以映射到页面的computed内方便使用。

getters

该模块用于获取state数据或者经过一些逻辑处理，同样可以通过this.$store.getter.getData()和mapGetters映射到页面的computed两种方式调用

mutations

通过设置同步方法来修改state内的数据，追踪state中数据的变化轨迹，通过this.$store.commit(name, params)或者向methods中注入mapMutations调用

actions

通过设置异步方法，并在其中调用mutations来更新state，监听数据改变的细节，通过this.$store.dispath(name, params)和methods中注入mapActions调用

moudles

模块分割管理，防止冲突和管理混乱，当直接声明分模块时，getters,mutations,actions默认挂载在全局，如果想进行完全分割，可以通过namespaced:true对方法也进行命名分割，这时候想要获取根store的内容，对于getters可以通过第三个第四个参数进行传递即getters(state, getters, rootState, rooteGetters)，而mutations和actions可以通过设置第三个参数为{root: true}向全局分发事件。通过快捷方式进行映射时设置第一个参数为模块名称。

模块动态注册

通过store.registerModule进行动态注册，通过unregisterModule卸载动态注册过的store，通过hasModule判断是否注册成功；

• 注册时通过设置第三个参数{preserveState: true}保留state，仅注册getters mutations actions，state认为现有的store已经包含，不进行覆盖

store.registerModule('a', module, { preserveState: true })

• 模块重用，当实例需要多次创建，state如果用对象声明则会被共享，如果想分离可以通过每次以函数的方式进行state的注册，每次都是新的state。

const MyReusableModule = {
  state () {
    return {
      foo: 'bar'
    }
  },
  // mutation, action 和 getter 等等...
}