vuex 学习

vuex知识点
1，vuex是什么？
  vuex是一个专门为vue.js应用程序开发的状态管理模式 + 库。
  它采用集中式存储 管理应用的所有组件的状态，并已相应的规则保证状态以一种可预测的方式发生变化。

  1.1 什么是“状态管理模式”？ 状态管理模式其实是集中式存储管理应用的所有组件的状态。

  1.2 安装：npm方式：npm install vuex@next --save 
       yarn 方式：yarn add vuex@next --save
  1.3 vuex和全局对象的不同：
   a：vuex的状态存储是响应式的，当vue组件从store中读取状态的时候，
      若store中的状态发生变化，那么相应的组件也会相应的得到高效更新；
   b：不能直接改变store中的状态，改变store中的状态的唯一途径就是现实的提交mutationn,
      这样使得我们方便的跟踪每一个状态的变化。
2，核心概念：
  2.1 state： 从store中读取状态最简单的方式就是在计算属性中返回某个状态；
      computed:{
        count(){
          return this.$store.state.count;
        }
      }
      mapState 辅助函数：当一个组件需要获取多个状态的时候，将这些状态声明为计算属性会有些冗余，
      这里可以使用mapState辅助函数生成计算属性；
      computed:{
        ...mapState({
          count: state => state.count, // 箭头函数更加高效简洁
          // 传字符串 'count' 等同于 'state => state.count'
          countAlis: 'count',
          // 为了使用this获取局部状态，必须使用常规函数
          countPlus(state){
            return state.count + this.localCount;
          }
        })
      }
      当映射的计算属性名称和state的子节点名称相同时，可以给mapState传一个字符串数组
      computed:{
        mapState(['count'])
      }
  2.2 Getter：可以认为是store的计算属性；
      当我们需要从store中的state中派生出一些状态是，例如对列表进行过滤并计数；使用getters比较合适，
      state:{
        todos:[{id:1,done:true},{id:1,done:false}]
      },
      getters:{
        doneTodos:(state) => {
          return state.todos.filter(todo => todo.done)
        }
      }
      页面中访问doneTodos: 
      computed:{
        doneTodos(){
          return this.$store.doneTodos // {id:1,done:true}
        }
      }

      // getter返回一个函数，可实现给getter传参
      getters:{
        getTodoById:(state) => (id) => {
          return state.todos.find(todo => todo.id === id)
        }
      }
      // getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。
      // getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

      mapGetters 辅助函数
      mapGetters 辅助函数仅仅是将store中的getter映射到局部计算属性中；
      computed:{
        ...mapGetters([ // 使用展开运算符，将getter混入到computed中
          'doneTodosCount','antherGetter'
        ])
        ...mapGetters({
          doneCount: 'doneTodosCount' // 将一个getter属性另取一个名字，使用对象形式；
        })
      }
    2.3 Mutation ：更改store中的状态的唯一方法是提交mutation, mutation 必须是同步函数。
    mutations:{
      increment(state){
        state.count ++;
      }
    }
    // 在组件中提交 Mutation
    // 页面的方法中使用： this.$store.commit('increment') 或者使用mapMutations辅助函数
    
    // 提交带有载荷的mutation
    this.$store.commit('increment',10);
    mutations:{
      increment(state,n){
        state.count += n;
      }
    }
    // 当载荷是一个对象
    this.$store.commit('increment',{amount: 10});
    // 带有载荷，且以对象发你风格提交
    this.$store.commit({type:'increment',amount:10})；
    
    // mapMutations 辅助函数
    methods:{
      ...mapMutations([
        'increment', // 将 this.increment() 映射为 this.$store.commit('increment');
        // mapMutations 也支持载荷
        'incrementBy' // 将this.incrementBy(amount) 映射为this.$store.commit('increment',amount);
      ]),
      ...mapMutations({
        add: 'increment' // 将 this.add() 映射为this.$store.commit('increment')
      })
    }

  2.4 action
     action类似于mutation，不用在于action提交的是mutation，而不是直接变更状态，action可以包含异步操作；
     state:{
       count:0
     }
     mutations:{
       increment(state){
         state.count ++;
       }
     }
     actions:{
       increment(context){
         context.commit('increment');
       }
       //可以用参数解构来简化代码
       crement({commit}){
         commit('crement')
       }
     }
     // action函数接受一个与store实例具有相同方法和属性的context对象，
     // 可以调用context.commit('xxx')提交一个mutation,
     // 或者可以通过context.state和context.getters来获取state和getters

     // 触发action
     方法中 this.$store.dispatch('increment')
     this.$store.dispatch('increment',{amount:10}); // 带有载荷形式触发action
     this.$store.dispatch({type:'increment',amount:10}); // 带有载荷且以对象形式触发

     mapActions辅助函数：雷同于mapMutations

2.5 module
    为了解决store对象可能的臃肿问题，vuex允许将store分割成模块module, 每个模块有自己的state, mutations， action, getter
    模块的局部状态：对于模块内部的mutation和getter，接收的第一个参数是模块的局部状态对象，
    同样，对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState：
    对于模块内部的 getter，根节点状态会作为第三个参数暴露出来：
    
    命名空间
    在带命名空间的模块内访问全局内容（Global Assets）#
    如果你希望使用全局 state 和 getter，rootState 和 rootGetters 会作为第三和第四参数传入 getter，也会通过 context 对象的属性传入 action。

    若需要在全局命名空间内分发 action 或提交 mutation，将 { root: true } 作为第三参数传给 dispatch 或 commit 即可。
    若需要在带命名空间的模块注册全局 action，你可添加 root: true，并将这个 action 的定义放在函数 handler 中