Vuex笔记

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，可以很方便集中管理给整个应用的所有组件的状态进行管理，并且有一套响应的规则来保证状态变化可以预测

Vuex状态管理流程

将State的状态绑定到组件，当用户在组件里发生交互，有状态变化时通过Dispatch来分发Actions，Actions不直接提交状态修改，可以通过Actions进行异步请求，再通过Commit提交到Mutation进行状态修改，通过Mutation进行状态可以很好地控制变化。

Vuex核心概念

Store  一个应用只有一个Store，是一个容器，包含应用的所有状态，不能直接修改

State  保存在Store中，维护状态，响应式的

Getter  计算属性，可以进行复杂的计算缓存

Mutation  修改状态必须通过Mutation

Action  可以进行异步操作

Moudule  状态过多不好管理，可以用Module将状态拆分为多个模块管理

使用Vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
})

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

访问State

import { mapState } from 'vuex'
export default {
  computed: {
    // 相当于 count: state => state.count
    // 别名 ...mapState([ num: 'count', message: 'msg'])
    ...mapState(['count', 'msg'])
}

使用Getter

new Vuex.Store({
  getters: {
    reversMsg (state) {
      return state.msg.split('').reserse().join('')
    }
})


import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['reversMsg'])
}

使用Mutation

new Vuex.Store({
  mutations: {
    increate (state, payload) {
      state.count += payload
    }
})


import { mapMutations } from 'vuex'
export default {
  methods: {
    ...mapGetters(['increate'])}

使用Action

new Vuex.Store({
  actions: {
    increateAsync (context, payload) {
      setTimeOut(() => {
         context.commit('increate', payload)
      }, 2000)
    }
})


import { mapAtions } from 'vuex'
export default {
  methods: {
    ...mapGetters(['increateAsync'])    

使用Module

// 每个module对应一个js文件
// js中都可以有 state、getters、mutations、actions
new Vuex.Store({
  modules: {
    // 导入模块
    products,
    cart
  }
})

// 开启命名空间
// 在每个module的export中 增加 namespaced: true
export default {
  namespaced: true
}

// 使用命名空间的数据
import { mapMutations } from 'vuex'
export default {
  methods: {
    //  第一个参数模块的名称 就是 导入模块时的名称
    ...mapGetters('products', ['increate'])
  }
}