Vuex最全使用总结(state、mutations、actions、getters、modules模块化)

一、Vuex各部分介绍

• 安装

npm install vuex --save

1、store中代码

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 此处存储数据
  },
  mutations: {
    // 此处用于处理state中数据，存放方法类似vue中的methods
  },
  actions: {
    // 此处用于存放异步操作
  },
  getters:{
    // 包装类，此处用于包装state中数据，类似于vue中的计算属性
  },
  modules: {
    //模块化，当数据量过大时可采用模块化
  }
})

2、main.js中代码

import store from './store'

new Vue({
  store,  //为了在 Vue 组件中访问 this.$store
  render: h => h(App)
}).$mount('#app')

二、vuex使用方法介绍

1、获取state中数据

• 方法一：this.$store.state.全局数据名称 如：this.$store.state.count

getData() {
	  //将取得的数据给msg
      this.msg = this.$store.state.num; 
    }

• 方法二：先按需导入mapState函数： import { mapState } from ‘vuex’
  然后数据映射为计算属性： computed:{ …mapState([‘全局数据名称’]) }

import {mapState} from 'vuex'

computed:{
    ...mapState(['num'])  //使用数时与data中数据方式相同
  }

2、使用mutations内的方法

mutations中内容

mutations: {
    add(state,step){
      //第一个形参永远都是state
      //第二个形参是调用此方法时传递的参数
      state.count+=step;
    }
  }

• 方法一：this.$store.commit(‘mutations中被调用方法名’,被传递的参数)

<button @click="Add">+1</button>

methods:{
  Add(){
    //使用commit函数调用mutations中的对应函数，
    //第一个参数就是我们要调用的mutations中的函数名
    //第二个参数就是传递给add函数的参数
    this.$store.commit('add',10)
  }
}

• 方法二：导入mapMutations函数import { mapMutations } from ‘vuex’，并映射到methods中，methods:{…mapMutations([‘要使用的方法名’])}

import { mapMutations } from 'vuex'

methods:{
  ...mapMutations(['add']),
    addbtn(){
      this.add(3)  //此处调用映射的add方法传递参数3
    }
}

3、使用actions内的方法

actions中内容

actions: {
  addAsync(context,step){
    setTimeout(()=>{
      context.commit('add',step);  //调用mutations中add方法
    },2000)
  }
}

• 方法一：this.$store.dispatch(‘actions中被调用方法名’,被传递进去的参数)

<button @click="AddAsync">点击2秒后+5</button>

methods:{
  AddAsync(){
    this.$store.dispatch('addAsync',5)
  }
}

• 方法二：导入mapActions函数import { mapActions } from ‘vuex’，并映射到methods中，methods:{…mapMutations([‘要调用的actions中的方法名’])}

import { mapActions } from 'vuex'

...mapActions(['addAsync']),
AddAsync(){
          this.addAsync(5);
      }

4、使用getters包装数据(用于对Store中的数据进行加工处理形成新的数据)

getters中内容

getters:{
    showNum(state){
      return '最新的count值为：'+state.count;  //注意最后要将包装好的数据return出去
    }
  }

• 方法一：this.$store.getters.包装数据名称如：this.$store.getters.showNum

{{$store.getters.showNum }}

• 方法二：导入mapGetters 函数import { mapGetters } from ‘vuex’，并映射到computed中，computed:{…mapGetters([‘包装数据函数名’]) }

import { mapGetters } from 'vuex'
computed:{
  ...mapGetters(['showNum'])  使用数据时与data中数据方式相同，例如{{showNum}}
}

---

三、总结

• state用于存储数据

• getters用于包装数据

• mutations用于处理state中数据，存放方法

• actions用于进行异步操作

  上述方法二中state、getters映射至computed中，mutations、actions映射至methods中。

四、Vuex模块化示例

• 新建moduleA.js文件内容如下，此文件用于存放Vuex模块内容。

const moduleA = {
    state: {
        count: 1
    },
    mutations: {
        add(state) {
            state.count++
        }
    },
    actions: {
        asyncAdd(context) {
            setTimeout(() => { context.commit('add') }, 2000)
        }
    },
    getters: {
        showCount(state) {
            return "moduleA中getters" + state.count
        }
    }
};

export default moduleA

• Vuex的Store文件内容如下

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

// 导入Vuex的moduleA模块
import moduleA from './moduleA'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  getters: {},
  modules: {
    a: moduleA  //注册模块，命名为a
  }
})

• Vuex模块state、getters、mutations、actions使用如下

<template>
  <div>
    <!-- 获取模块a中的state -->
    {{$store.state.a.count}}
    <!-- 使用模块a中的mutations -->
    <button @click="addCount">使用模块a中的mutations控制count加1</button>
    <!-- 使用模块a中的actions -->
    <button @click="asyncAdd">使用模块a中的actions控制count两秒后加1</button>
    <!-- 获取模块a中的getters -->
    {{$store.getters.showCount}}
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    addCount() {
      this.$store.commit("add");
    },
    asyncAdd() {
      this.$store.dispatch("asyncAdd");
    }
  }
};
</script>

Vuex模块化总结：在 Vuex 模块化中，state 是唯一会根据组合时模块的别名来添加层级的，后面的 getters、mutations 以及 actions 都是直接合并在 store 下。