vuex详解

vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。用于较大型项目。

vuex使用场景：

1、用户的个人信息管理模块；

2、电商项目的购物车模块；

3、我的订单模块，订单列表中点击取消订单，然后更新对应的订单列表；

4、在订单结算页，获取需要的优惠券，并更新订单优惠信息。

vuex的核心概念:

1、state

  // 组件内严禁直接改变state内的数据
  // state提供唯一的公共数据源，所有共享的数据都要统一放到store的state中进行存储
  state: {},

2、mutations

// mutations用以变更store中的数据，可以集中监控所有数据的变化
//*注意mutations内不能执行异步操作
mutations:{}

3、actions

//用于执行异步操作
actions:{}

4、getters

 /*
   *getters用于对store中的数据进行加工处理形成新的数据
   *getters可以对stroe中已有的数据加工处理之后形成新的数据，类似vue中的计算属性
   *store中数据发生变化，getter的数据也会跟着变化
   */
  getters: {},

以下是使用计数器的小demo

store.js文件代码

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

Vue.use(Vuex)

export default new Vuex.Store({
  // 组件内严禁直接改变state内的数据

  // state提供唯一的公共数据源，所有共享的数据都要统一放到store的state中进行存储
  state: {
    count: 0
  },
  /*
   *getters用于对store中的数据进行加工处理形成新的数据
   *getters可以对stroe中已有的数据加工处理之后形成新的数据，类似vue中的计算属性
   *store中数据发生变化，getter的数据也会跟着变化
   */
  getters: {
    showNum(state){
      return '当前最新的数量是【'+state.count+'】'
    }
  },
  // mutations用以变更store中的数据，可以集中监控所有数据的变化
  mutations: {
    // mutations函数内不能执行异步操作，如setTimeout
    add(state) {
      state.count++
    },
    // 接参
    addN(state, step) {
      state.count += step
    },
    sub(state) {
      state.count--
    },
    subN(state, step) {
      state.count -= step
    },
  },
  // actions用于执行异步操作
  actions: {
    addAsync(context) {
      // 在actions中不能直接修改state中的数据，必须通过context.commit('add')触发某个mutation才行
      setTimeout(() => {
        context.commit('add')
      }, 1000);
    },
    // 异步接参
    addNAsyns(context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000);
    },
    // 触发action第二种方式
    subAsync(context) {
      setTimeout(() => {
        context.commit('sub')
      }, 1000);
    },
    subNAsync(context,step) {
      setTimeout(() => {
        context.commit('subN',step)
      }, 1000);
    },
  },
  modules: {
  }
})

组件A,使用第一种触发mutations函数与actions函数的方法

<template>
  <div>
    <h3>当前最新的count值为：{{ $store.state.count }}</h3>
    <h1>{{ $store.getters.showNum }}</h1>
    <button @click="btnAdd">+1</button>
    <button @click="btnAddN">+N</button>
    <button @click="btnAdd3">+1 Async</button>
    <button @click="btnAdd4">+N Async</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods:{
    btnAdd(){
      // 通过commit方法调用store里面mutations里的某个函数
      this.$store.commit('add')
    },
    // 传参
    btnAddN(){
      this.$store.commit('addN',3)
    },
    btnAdd3(){
      // dispatch函数用于触发某个action
      this.$store.dispatch('addAsync')
    },
    // 异步传参
    btnAdd4(){
      this.$store.dispatch('addNAsyns',5)
    }
  }
};
</script>

组件B，使用第二种触发mutations函数与actions函数的方法

<template>
  <div>
    <h3>当前最新的count值为：{{ count }}</h3>
    <h1>{{ showNum }}</h1>
    <button @click="btnSub">-1</button>
    <button @click="subN(3)">-3</button>
    <button @click="subAsync">-1 Asyns</button>
    <button @click="subNAsync(5)">-N Async</button>
  </div>
</template>

<script>
// 触发mutation函数的第二种方式，从vuex中按需引入
import { mapState, mapMutations,mapActions ,mapGetters} from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  },
  methods: {
    // 触发mutation函数的第二种方式
    ...mapMutations(['sub','subN']),
    ...mapActions(['subAsync','subNAsync']),
    btnSub() {
      this.sub()
    }
  },
}
</script>