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>

原著是一个有趣的人,若有侵权,请通知删除