学习十八、VueX 状态管理

VueX 状态管理

一、什么是 VueX

- Vuex 是专门为 Vue. js 设计的状态管理库

- Vuex 采用集中式的方式存储需要共享的状态

- Vuex 的作用是进行状态管理，解决复杂组件通信，数据共享

- Vuex 集成到了 devtools 中，提供了 time-travel 时光旅行历史回滚功能

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

  computed: {
    ...mapState({ num: 'count'，message: 'msg' })，
    ...mapGetters([ reverseMsg' ] )
  },
  methods: {
    ...mapMutations([ 'increate' ]),
    ...mapActions([ 'increateAsync' ])
  },

  使用 $store.commit 触发 mutation，

  使用 $store.dispatch 触发 action，

 

二、什么情况下使用 VueX

- 非必要的情况不要使用 Vuex

- 大型的单页应用程序

  - 多个视图依赖于同一状态

  - 来自不同视图的行为需要变更同一状态

 

三、VueX 插件介绍

- VueX 插件就是一个函数

- 这个函数接受一个 store 参数

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    products,
    cart
  },
  plugins: [myPlugin]
})

const myPlugin = store => {
  store.subscribe((mutation, state) => {
    if (mutation.type.startsWith('cart/')) {
      window.localStorage.setItem('cart-products', JSON.stringify(state.cart.cartProducts))
    }
  })
}