Vuex

vuex五个核心概念

1. state:vuex的基本数据，用来存储变量
2. getters:从基本数据(state)派生的数据，相当于state的计算属性
3. mutations:提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
4. actions:和mutation的功能大致相同，不同之处在于 ==》*Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作
5. modules:模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
   

简述工作流程

1. 在 vue 组件里面，通过 dispatch 来触发 actions 提交修改数据的操作。
2. 然后再通过 actions 的 commit 来触发 mutations 来修改数据。
3. mutations 接收到 commit 的请求，就会自动通过 Mutate 来修改 state
   (数据中心里面的数据状态)里面的数据。
4. 最后由 store 触发每一个调用它的组件的更新

辅助函数

1. mapState： 对state的对象进行二次计算，他可以简化我们代码，这样我们获取cartList,不用写this.$store.state.cartList一大串了，尤其对于我们组件中用到次数挺多的情况下，我们完全可以用mapState来代替。

   import { mapState } from 'vuex'
   export default {  
       computed:mapState({  
         cartList:state => state.cartList,
         getCartList:'cartList'  //或者我们新定义一个参数，接受cartList,这样组件其他地方用到了,我们可以用this.getCartList来获取    
      })  
   }

2. mapGetter：我们可以理解成他是和mapState一样，都是对state里面的参数进行计算，并返回相应的值，所以我们平常看到的mapState.mapGetters都是在computed属性里面，但是和mapState有点不同的是，mapState是仅对state里面的参数进行计算并返回，而mapGetters是对state参数派生出的属性进行计算缓存，比如计算state中cartList数组的长度或者对他的参数进行筛选

   import { mapGetters} from 'vuex'
   // getters.js
   export default {
       getCartListLen: state =>{
           return state.cartList.length
       }
   }
   // 组件
   export default {
      computed:{
          mapGetters({
               getLen:'getCartListLen'
          }),
      }
   }

3. mapMutation：写在methods里面，因为他触发的是方法

   import { mapMutations} from 'vuex'
   
   export default {
      methods:{
         ...mapMutations([
         'add_cart', // 将 `this.add_cart()` 映射为 `this.$store.commit('add_cart')`
       ]),
      }
   }

4. mapAction

   import { mapActions} from 'vuex'
   export default {
      methods:{
         ...mapActions([
         'add_cart', // 将 `this.add_cart()` 映射为 `this.$store.dispatch('add_cart')`
       ]),
      }
   }