Vuex 状态管理

1. Vuex 流程简述

dispatch() -> 提交到 Action //不能更改数据，作用是提交到mutations -> Commit() -> Mutation // 真正操作对应state方法的函数 -> 响应渲染

---

2. 使用方法

• 配置对应的store以及state, 在view层，通过computed计算数据获得对应的响应式state(data无法获取到state,因为state的改变需要重新渲染)

2.1 store基础使用示例

代码示例 (store)

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

//使用vuex
Vue.use(Vuex)

//导出store
export default new Vuex.Store({
    state: {
        count: 0
    },
     //组件通过dispatch方法触发actions里面的countAdd方法
    actions: {
    /**
    /* Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,
    /* 提交给mutations里对应的函数
    * @param {*} num
    */

     countAdd(context,num){
       context.commit('countAdd',num)
     }
    },
    mutations: {
      /**
      * @param {*} num
      *
      */
      countAdd(state,num){
        state.count+=num
      }
    }


})

代码示例 （在组件层引用）

export default {
  name: 'ComponentName',
  // 通过计算属性来获得count
  computed: {
    count: function(){
      // 通过vue的this.$store来获得state
      return this.$store.state.count
    }
  },
    methods: {
    handleClick:function(num){
    // 通过dispatch触发actions中的方法countAdd，actions提交mutations
      this.$store.dispatch('countAdd',num)
    }
  }

}

2.2 简化使用（省略通过dispatch提交到action的过程，直接触发commit 提交到mutation函数)

代码示例 （组件层直接操作commit触发action)

methods: {
    handleClick:function(num){
    // 调用$store.commit唤醒mutations处理函数
      this.$store.commit('countAdd',num)
    }
}

store (简化模板)

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

//使用vuex
Vue.use(Vuex)

//导出store
export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        countAdd(state,num){
            state.count+=num
        }
    }
})

使用对象展开运算符(mapState 、mapMutations)简化代码

简化多处使用this.$store。操作状态管理

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'ComponentName',
  data () {
    return {
    }
  },
  computed: {
  // 通过mapState获得state里面的count，并赋值给countA
    ...mapState({
      countA: 'count'
    })
  },
  methods: {
    handleClick:function(num){
      //this.$store.commit('countAdd',num)
      this.countAdd(num)
    },
    // 通过展开运算符提交mutations里面的方法countAdd
    ...mapMutations(['countAdd'])
  }
}
</script>


 

Module (模块化)

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

Getter store计算属性

Getter vuex.vuejs.org/zh/guide/ge…