vuex让页面响应更简单，一看就懂系列

在单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理，就是所谓的全局状态管理；简单的理解就是你在页面A做了一些操作需要页面C、B、D、分别去响应变更。父子组件传值都还能接受，跨组件传值的话就会有很大的阻碍。下面咱们一步一步地剖析下vuex的使用:

首先要安装、使用 vuex

首先在 vue 2.0+ 你的vue-cli项目中安装 vuex :

npm install vuex --save

在src目录下新建store文件夹，在其中再新建一个index.js，基本vuex操作都将在这里展开

main.js

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store;

new Vue({
  el: '#app',
  router,
  store,
  components: {
    App
  },
  template: '<App/>'
})

store=>index.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
    state:{//数据存放的
        number:1
    },
    mutations:{//可以理解为实际执行的函数，改变数据的
        add(state){
            state.number+=1
        },
        rev(state,cb){
            if(state.number<=0){
                cb()
            }else{
                state.number-=1
            }
            
        }
    },
    actions:{//操作数据用的
        addNumber(context){
            context.commit('add')
        },
        revNumber(context,cb){
            context.commit('rev',cb)
        }
    },
    getters:{//获取数据用的
        number(state){
            return state.number
        }
    }
})

组件test.vue

①方法

获取state中的数据可以使用：
this.$store.state.number ||  this.$store.getters.number
改变state中的数据可以使用：
this.$store.commit("add")//直接操作mutations
 || this.$store.dispatch("addNumber")//间接操作mutations

②方法

<template>
  <div class="aa">
      <button @click="revNumber(rev)">-</button>
      &nbsp;{{number}}&nbsp;
      <button @click="add">+</button>
  </div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex';
export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters([
      'number'//获取到state数据。
    ])
  },
  mounted() {},
  methods:{
    rev(){//减到最小值后的回调
      console.log("已到达最小值")
    },
    ...mapActions([//可以直接使用@click
      "addNumber",
      "revNumber"
    ])
  }
};
</script>

页面test2.vue

<template>
  <div class="hello">
    {{number}}
<!-- 此处的number是会跟着test.vue页面的改变而改变， -->
  </div>
</template>
<script>
import {mapState} from 'vuex';
export default {
  data() {
    return {
      num: 0
    };
  },
  computed: mapState({
    number:state => state.number+1//默认+1，mapState与mapGetters的区别，让你少敲几次键盘..
  }),
  methods:{}
};
</script>