Vuex从入门到熟练使用

本文github地址
首先我问看下完整的Vuex选项对象

new Vuex.Store({
  state,  //访问状态对象
  mutations,  //访问触发状态
  getters,
  actions
});
//还有一个模块的
export default new Vuex.Store({
  modules:{
    a:moduleA
  }
});

一、 state --- 访问状态对象

说明：也就是使用vuex中的数据
**1. **直接在组件中使用{{ $store.state.num }}
**2. **需要使用数据的组组件（此处是App.vue）中的计算属性

a. 方式一

computed: {
    count(){
      return this.$store.state.num + '：方式一获取的state数据';//this指的是main.js中的vue实例对象
    }
  }

b. 方式二，利用mapState

  import {mapState} from 'vuex'

  computed:mapState({
    // es箭头函数写法，好处箭头函数中的this有穿透效果，直接是上上级
    // count: state => state.num + '：方式二获取的state数据'
    // es5写法
    count:function (state) {
      return state.num + '：方式二获取的state数据'
    }
  })

c. 方式三,不对数据进行计算（加工处理），当数据较多的时候,数组形式

  computed:mapState([
    'counut'//这里必须state中的数据和此模板中的数据一个名字，也就类似组件定义的简写
  ])  

d. 方式四,不对数据进行计算 ，当数据较多的时候,json形式

推荐

  computed:mapState({
     count:'num'
  })

效果如下图：

二、 Mutations--- 触发状态

说明：必须用commit触发mutations中的方法
需求：在组件中传入一个值给store.js

<button type="button" name="buttonAdd" @click="$store.commit('add',{a:10})">加一个</button>

const mutations = {
  //定义方法 --- 类似methods
  add(state,n){//state 是把上面的数据引入进来的
    console.log(n);//传入的第二参数的那个对象
    state.num+= n.a;
  }
}

1. 利用mapMutations引入sotre中的触发状态

<button type="button" name="buttonAdd" @click="add({a:10})">map=>加一个</button><!-- 传值的话只需要在括号里传，但要注意格式 -->
      <button type="button" name="buttonAdd" @click="minus">map=>减一个</button>

import {mapMutations} from 'vuex'

//因为方法所以写在组件中的methods中
 methods:mapMutations([
     'add',
     'minus'
   ])

三、 getters --- 获取者

注意：在vue2.x中的computed中不要使用箭头函数，因为箭头函数中的this指的是上一层不是本层。

//组件中
import {mapGetters} from 'vuex'

computed:{
    /*count(){
      return this.$store.getters.num
    }*/
    //map对象方式获取getters
    ...mapGetters({
      count:'num'//引进是静态的
    })
  },
//store.js文件中
const getters = {
  num:function (state) {
    return state.num;
  }
}
export default new Vuex.Store({
  state,
  mutations,
  getters
});

注意：..mapGetters({})使用了三个点“...”，由于vue-cli生成的依赖包中不能解析此语法，所以需要进行如下配置。

1. npm install babel-preset-stage-2 --save-dev
2. 在.babelrc文件中加一个配置

["stage-2"]

四、 actions --- 异步状态

和Mutations的区别是Mutations是同步状态，Actions是异步状态，可以调用Mutations中的状态，异步的批处理的一个集合。

//组件中
<button type="button" name="buttonAdd" @click="addPlus">addPlus =>加二个</button>
      <button type="button" name="buttonAdd" @click="minusPlus">minusPlus</button>

import {mapActions} from 'vuex'

 methods:{
     ...mapMutations([
       'add',
       'minus'
     ]),
     ...mapActions([
       'addPlus',
     ]),
     ...mapActions({
       minusPlus:'minusPlus'
     })
   }

//store.js中
const actions = {
  addPlus(context){//context代表了整个的store
    context.commit('add',{a:2}); //每次加2
    setTimeout(()=>{
        context.commit('minus');
    },3000)
    console.log('Actions中的加');
  },
  minusPlus({commit}){//commit
    commit('minus')
  }
}
export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
});

五、 module --- 模块化

当 state, mutations, getters,actions太多的时候，我们就需要分成不同组别的模块组。

//组件中
  A模块组中的num => {{  $store.state.a.numA }} 
  B模块组中的num => {{  $store.state.b.numB }}
//store.js中
const moduleA ={
  state: {
    numA: 888
  }
}
const moduleB ={
  state: {
    numB: 666
  }
}

export default new Vuex.Store({
  modules:{
    a:moduleA,
    b:moduleB
  }
});

最终demo如下图：