关于vuex

怎么理解vuex
在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。

使用步骤：
1.下载
项目创建后，然后安装vuex，使用命令：npm install vuex --save
但是在脚手架3.0以后，可以自选vuex，不用再下载了

2.创建并引入
然后 在src文件目录下新建一个名为store的文件夹，为方便引入并在store文件夹里新建一个index.js
在3.0里，如果你选择了vuex，会在src生成一个store.js文件，内容如下

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {

  },
  mutations: {

  },
  actions: {

  }
})

对于3.0，在main.js里也直接做了引入，如果是2.0就要自己引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

这样一来就可以在任何一个组件里面使用this.$store了

3.State公共状态，保存公共数据，可以理解为data
vuex中的数据源，我们需要保存的数据就保存在这里，可以在页面通过 this.$store.state来获取我们定义的数据；

在store文件里声明一个state变量,里面放数据变量

state: {
    count:1
    man:55
  },

在全局中通过this.$store.state显示出来保存的数字

<h2>{{this.$store.state.count}}</h2>

4.Getters计算属性，里面定义方法，类似于computed

虽然是计算属性，但里面放的方法不是计算的方法，主要用来监听state中值的变化

Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果

 state: {
    count:1,
    man:55
  },
  // getters里面定义的是一个方法，但是最终使用的时候当做属性去使用
  getters:{
    formatCount:function(res){
      return res.man+'分'
    }
  },

使用的时候，this.$store.getters

<h2>{{this.$store.state.count}}</h2>
<h2>{{this.$store.getters.formatCount}}</h2>

getters里面的方法类似过滤器，可以过滤数据，类似与computed，只要后面formatCount里面用到的state数据发生变化，formatCount函数就会重新调用，重新过滤，以及重新计算，也具有缓存的特性

5.Mutations里面是对数据的处理

数据我们在页面是获取到了，但是如果我们需要修改count值怎么办？如果需要修改store中的值唯一的方法就是提交mutation来修改
设置按钮，点击按钮触发事件

    <h2>{{this.$store.state.count}}</h2>
    <h2>{{this.$store.getters.formatCount}}</h2>
  	<button @click.prevent="addCount">+</button>
   	<button @click.prevent="reduceCount">-</button>

在事件里面 通过 this.$store.commit('add) 绑定在store写的加减操作
这里注意mutations里面的方法的形参只能有两个，一个是state，另一个是我们自己传的
this. $store.commit(‘add’,[4,5])

methods: {
    addCount() { 
        this.$store.commit('add')
    },
    reduceCount() { 
        this.$store.commit('reduce')
    },
  },

在store里设置对数据或状态的处理

mutations: {
    add(state){
      state.count=state.count+1
      state.man=state.man+10
    },
    reduce(state){
      state.count=state.count-1
      state.man=state.man-10
    }
  },

这样就能实现对state数据的加减处理了

6.Actions类似于methods
官方并不介意我们这样直接去修改store里面的值，而是让我们去提交一个actions，在actions中提交mutation再去修改状态值

7.mapState、mapGetters、mapActions

如果我们不喜欢这种在页面上使用“this.$stroe.state.count”和“this. $store.dispatch(‘funName’)”这种很长的写法，那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了；
我们定义两个数
state: {
count: 10,
numb: 20
},

<button >{{count}}</button>

  import {mapState,mapActions} from 'vuex'  

 computed: mapState({ // mapState相当于映射  
        count: 'numb', 
    })  
  }  

这里count的值就是numb，也就是20
所以map其实就是一个在store文件中的映射而已，就是不用让你要调用一个值需要敲这么多代码：this.$state.count;而只需要用count就可以了