vuex中的核心概念：state、getters、mutations和actions

为什么要用vuex

• 使不同组件共享一些变量，特别是那些非父子关系的组件

state

• 用来注册你要共享的变量
  这个比较容易理解，既然要共享变量，就得先定义这些变量

  state:{
      para1:value1,
      para2:value2,
      arr:[a1,a2,a3]
  }
  

getters

• 当state中的arr变化时，我们想取到a2的值，就可以用getters，由于getters中需要用到state对象，所以函数中需要接受state对象，然后return

  getters:{
      arr_2:function(state){
            return state.arr[1]
      }
  }
  

• 这个也是很有意义的，因为如果para1和para2分别表示firstname和lastname，这样就可以用getters拼接出一个全名，而不至于state数据冗余，可以看出getters相当于computed

mutations

• 当组件中的元素触发事件后，我们想把state中的数据加以改变，怎么改变？用mutations注册，由于要改变state中的值，所以函数会接受state对象

    mutations:{
        increase:function(state){
            para1 = doSomeChange(para1)
        }
    }
  

• 我们仅仅是在mutations中注册了事件，至于如何触发，假如组件#app有一个click事件需要触发mutations中的increase，可以用commit

    <div id="app" @click="clickHandler"><>
    .
    .
    .
    methods:{
        clickHandler:function(){
            this.$store.commit("increase")
        }
    }
  

• mutations为何不能接受getters？
  其实没必要接受，因为getters会随state的变化而变化；而且也不能接受，因为getters的变化会而且也应该会反过来导致state变化，但是这个因果关系倒置了，因为getters是从state得来的；还有一点，getters的变化不一定能唯一地倒推出state如何变化。

actions

• 为什么要用actions
mutations只能注册同步事件，异步事件无能为力
• 既然异步，那就要有各种事件需要commit，所以actions主要用来commit事件，所以函数需要接受一个与store实例具有相同方法和属性的对象context，它有commit方法以及state和getters属性

  actions:{
      asyncIncrease(context){
          setTimeout(funciton(){
              context.commit("increase")
          },1000)
      }
  }
  //等同于参数结构
  actions:{
          asyncIncrease({commit}){
          setTimeout(funciton(){
              commit("increase")
          },1000)
      }
  }
  

• actions通过dispatch方法触发

  this.$store.dispatch("asyncIncrease")