vue57 —— vuex 核心 & 数据响应式原理

vuex核心

1. state单一状态树

单一状态树： single sourse of truth ，也称单一数据源

2. getters （类似与单个组件中的计算属性computed）

	more20(state){
   
      return state.stu.filter(s => s.age > 20 )
    },
    length(state,getters){
   
      return getters.more20.length
    },
    moreAge(state){
     // 使用时需传参
      // return function(age){
   
      //   return state.stu.filter(s => s.age > age)
      // }
      return age => {
   
        return state.stu.filter(s => s.age > age)
      }
    }

3. mutation （类似于methods）

vuex里store状态更新的唯一方式，提交mutation
主要包括两部分：

• 字符串的事件类型（type）

• 回调函数（handle），第一个参数是state

    定义
    index.js：
    increment (state) {
    	 state.countor ++;
     }
     increment: 事件类型
     剩余部分：回调函数
  
    使用：
    App.vue：
    this.$store.commit('increment')
  

传递参数：更新数据时额外携带一些参数（payload）

index.js

 // 加上一个不固定的数 
 // 1. 普通提交风格
    addCount(state,count){
   
      state.countor