全面介绍一下vuex，快到碗里来~这是一个系列博客（二) # 全面介绍一下vuex，快到碗里来~这是一个系列博客（一)

vuex之Mutations修改状态

学习了怎么读取State, 学习一下怎么样修改状态, 如何操作Mutations.

Vuex提供了commit方法来修改状态，我们粘贴出第一节课的代码内容，简单回顾一下，我们在button上的修改方法。

<button @click="$store.commit('add',10)">add</button>

store.js文件：现在store.js文件里给add方法加上一个参数n

const mutations={
  add(state,n){
    state.count +=n;
  },
  reduce(state){
    state.count--;
  }
}

传值： 这只是一个最简单的修改状态的操作，在实际项目中我们常常需要在修改状态时传值。比如上边的例子，是我们每次只加1，而现在我们要通过所传的值进行相加。其实我们只需要在Mutations里再加上一个参数，并在commit的时候传递就就可以了。我们来看具体代码：在Count.vue里修改按钮的commit( )方法传递的参数，我们传递10，意思就是每次加10.

<p>
  <button @click="$store.commit('add',10)">add</button>
  <button @click="reduce">reduce</button>
</p>

模板获取Mutations方法 实际开发中我们也不喜欢看到$store.commit( )这样的方法出现，我们希望跟调用模板里的方法一样调用。例如：@click=”reduce” 就和没引用vuex插件一样。

1.在模板count.vue里用import 引入我们的mapMutations：

import { mapState ,mapMutations} from 'vuex'

2.在模板的

methods:mapMutations(['add','reduce'])

通过上边两部，我们已经可以在模板中直接使用我们的reduce或者add方法了，就像下面这样。

<button @click="reduce">-</button>

vuex之Getters计算过滤属性

getters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。

getters的基本用法

比如我们现在要对store.js文件中的count进行一个计算属性的操作，就是在它输出前，给它加上100.我们首先要在store.js里用const声明我们的getters属性。

const getters={
  count:state=>state.count+=100
}

写好 gettters之后，我们还需要在Vuex.Store()里引入，由于之前我们已经引入了state盒mutations，所以引入里有三个引入属性。代码如下:

export default new Vuex.Store({
  state,
  mutations,
  getters
})

在store.js里的配置算是完成了，我们需要到模板页对computed进行配置。在vue 的构造器里边只能有一个computed属性，如果你写多个，只有最后一个computed属性可用，所以要对上节课写的computed属性进行一个改造。改造时我们使用ES6中的展开运算符”…”。

computed: {
  ...mapState(['count']),
  count(){
    return this.$store.getters.count;
  }
}

需要注意的是，你写了这个配置后，在每次count 的值发生变化的时候，都会进行加100的操作。用mapGetters简化模板写法： state和mutations都有map的引用方法把我们模板中的编码进行简化，我们的getters也是有的，来看一下代码。

//首先用import引入我们的`mapGetters
import { mapState ,mapMutations, mapGetters} from 'vuex'

在computed属性中加入mapGetters

computed: {
  ...mapState(['count']),
  // count(){
  //   return this.$store.getters.count;
  // }
  ...mapGetters(['count'])
}

这是关于VUEX的系列博客，持续更新中~

前端路漫漫其修远兮，吾将上下而求索，一起加油，学习前端吧~ *我是圈圈，看我沸点可以入群~