vuex-状态管理

前段时间看权限管理部分用到vuex，看不懂vuex部分的写法，所以就去了解了一下，在此记录

首先vuex 是一个状态管理，我的理解是用来存放数据或者状态，存取数据或撞他，统一更改数据或状态的一个地方

主要包含四部分：

（1）state 

  state主要是用来存储的，像一个共有仓库一样，把我们的数据放在此处，不管哪个组件需要了就来此索取，state中的内容是其他三部分的数据源，

（2）getter

  getter 可以从字面理解是get（得到）数据或状态的，我们需要什么样的数据，就在getter下进行处理，可以理解对store的处理（comouted属性），比如给我们的仓库里面的内容都带上一个圣诞帽，或者我们的商品价格都打五折，就是我们对state中的数据进行的一个延伸化的处理后状态的存储模式

（3）mutation

‘更改 Vuex 的 store 中的状态的唯一方法是提交 mutation’

改变state中状态变更的方法，我们再store中声明了一个clickReduce事件，这个事件是每点击一次，products中的价格就减去payload(传入的参数)

（4）action

我理解的action和mutation是一样的，都是改变state的状态，区别就在于action支持异步，而mutation支持同步，所以action大概使用的频率是很高的吧（自个觉得的）

使用方法上，action需在内部先发布mutation，然后在外部对action进行派发（dispatch）

mutation只需要在使用时进行提交

辅助函数：以mapActions举例

js部分  

  methods: {
    // saleFn () {
    //   this.$store.commit('clickReduce')
    //   this.$store.dispatch('clickReduce2', 10)
    // }
    ...mapActions({
      saleFn: 'clickReduce2'
    })
  }

html部分

 <div class="btn" @click="saleFn(10)">减小10</div>

这里的saleFn: 'clickReduce2' ，相当于是saleFn函数，触发store派发clickReduce2，等价于this.$store.dispatch('clickReduce2')

看官网时  说mapActions也支持载荷，但是不知道传的参数该写在哪，自己试的时候，这个参数需要自己传一下，如上面的html部分 saleFn(10)，参数10就是这么传过去的