vuex的学习

vuex是什么？

1. vuex是专为vue.js应用程序开发的状态管理模式
2. 它采用集中式存储管理应用所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
3. vuex也集成到vue的官方调式工具devtools extension

状态管理到底是什么？

1. 说简单点就是把需要多个组件共享的变量全部存储到一个对象里面，然后将这个对象放到顶层的实例中，让其他组件可以使用
2. 为什么我们不自己封装一个对象来管理呢？

• 因为封装在vuex里面的数据能够直接做到响应式

什么时候用vuex

1. 当多个视图都依赖同一个状态的时候

vuex基本使用

1.  在src目录下创建文件夹store，并且创建一个index.js文件，
    import Vue from 'vue'
    import Vuex from 'vuex'
    // 1.安装插件
    Vue.use(Vuex)
    //创建实例
    const store = new Vuex.Store({
      state:{
        count:0
      },
      mutations:{
        increment(state){
          state.count++
        }
      }
    })
   

2.    然后让所有Vue组件都能使用这个store对象
      来到main.js文件，导入store对象，并放到new Vue中
      这样，其他组件就可以通过this.$store的方式，获取到这个store对象了
      import Vue from 'vue'
      import App from 'App'
      import store from './store'
      new Vue({
        el:'#app',
        store,
        render:h=>h(App)
      })
   
   

3.  使用vuex中的count
    通过this.$store.state.属性的方式来访问状态
    通过this.$store.commit('mutatiom中方法')来修改状态
   

4. 注意事项：

• 我们通过提交mutation的方式，而非直接改变store.state.count
• 这是因为vuex可以更明确的追踪状态的变化，所以不要直接改变store.state.count的值

vuex中的几个核心的概念

• state
• getters
• mutations
• actions
• module

state

• 存放共享源数据
• 数据的修改不在此进行

getter

•   有时候我们需要从store中获取一些state变异后的状态
    如：有一组对象数据，我么要获取年龄大于20岁的个数
    getters:{
      greaterAgestu:state=>{
        return state.students.filter(s => s.age>=20)
      }
    }
    getter默认不能传递参数，如果要传参，只能让getters本身返回另一个参数
    如：根据ID获取用户信息
    getters:{
      stuByid:state=>{
        return id=>{
          return state.students.find(s=> s.id===id)
        }
      }
    }
  

mutation

• vuex中store状态更新唯一方式：提交Mutation
• mutation的主要两部分：1.字符串的事件类型（type） 2.回调函数（handler），该回调函数的第一个参数就是state

1.  mutations的定义
    mutations:{
      increment(state){
        state.count++
      }
    }
    组件中通过mutation更新
    increment：function(){
      this.$store.commit('increment')
    }
   

2.   mutation传递单个参数             
     decrement：funtion(){
       this.$store.commit('decrement',2)
     }
   
     decrement(state,n){
       state.count -= n
     }
   
     mutation传递多个参数
     使用对象this.$store.commit('decrement',{count:0})
     在用payload对象取出相关信息
     decrement(state,payload){
       state.count =payload.count
     }
   

3.  mutation的另一种提交风格（type对象属性）
    this.$store.commit({
      type:'changeCount'，
      count：100
    })
   
    Mutation中的处理方式是将整个commit的对象作为payload使用, 所以代码没有改变
    changeCount(state,payload){
        state.count =payload.count
      }
   

4.  mutation的常量类型：
    1.在mutation中, 我们定义了很多事件类型(也就是其中的方法名称)
    2.方法过多, 使用者需要花费大量的经历去记住这些方法, 甚至是多个文件间来回切换, 查看方法名称, 甚至如果不是复制的时候, 可能还会出现写错的情况.
   
    如何解决：
    1.我们可以创建一个文件: mutation-types.js, 并且在其中定义我们的常量
    2.定义常量时, 我们可以使用ES2015中的风格, 使用一个常量来作为函数的名称.
   
    具体实现：
    mutation-types.js文件中
    export const UPDATE_INFO = 'UPDATE_INFO'
   
    在vuex的index.js文件中
    引入：import * as types from './mutation-types'
   
    使用：[UPDATE_INFO](state,payload){
   
    }
   
    在组件中 
    引入：import {UPDATE_INFO} from './store/mutation-types'
    使用：直接使用UPDATE_INFO
   

5. 当有异步操作的时候，不要使用mutation,使用actions，因为当使用mutation时，官方插件devtools监控不到异步操作

actions

1. • 但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候怎么处理呢?
   • Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.

2.  mutation和action对比
    mutation:{
      increment(state){
        state.count++
      },
    action:{
      increment(context){
        context.commit('increment')
      }
    }
    }
   
    context是什么?
    context是和store对象具有相同方法和属性的对象.也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等.
   
    在Vue组件中, 如果我们调用action中的方法,那么就需要使用dispatch (同样也支持传递payload对象属性)
    methods：{
      increment(){
        this.$store.dispatch('increment',{count:5})
      }
    }
   
    mutations:{
      increment(state,payload){
        state.count += payload.count
      }
    }
    actions:{
      increment(context,payload){
        setTimeout(()=>{
          context.commit('increment',payload)
        },5000)
      }
    }
   

3.  在Action中, 我们可以将异步操作放在一个Promise中, 并且在成功或者失败后, 调用对应的resolve或reject.
    actions:{
      increment(context){
        return new Promise((resolve)=>{
          setTimeout(()=>{
            context.commit('increment')
            resolve()
          },1000)
        })
      }
    }
   
    methods:{
      increment(){
        this.$store.dispatch('increment').then(res=>{
          console.log('完成了更新操作')
        })
      }
    }
   

midule

1.  Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.
    当应用变得非常复杂时,store对象就有可能变得相当臃肿.
    为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutations、actions、getters等
   
    const moduleA ={
      state:{...},
      mustation:{...},
      ....
    }
   
    const store =new Vuex.Store({
      modules:{
        a:moduleA
        b:moduleB
      }
    })
   

2. Module局部状态

• 我们在moduleA中添加state、mutations、getters
• mutation和getters接收的第一个参数是局部状态对象
• 虽然, 我们的doubleCount和increment都是定义在对象内部的
• 但是在调用的时候, 依然是通过this.$store来直接调用的.

3.  actions的写法呢? 接收一个context参数对象
    局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState
    const moduleA ={
      //...
      actions:{
        incrementInfoRootSum({state,commit,rootState}){
          if((state.count + rootstate.count)%2 ==1 ){
            commit('increment')
          }
        }
      }
    }
   

4. 最后抽取store中的各个对象到各个文件，在进入导入，来完成最后清晰的项目结构