3-3-03-Vuex 插件

Vuex 插件

在学习购物车案例的时候，需要将购物车的信息存储到本地存储 localStorage 中，这个存储操作需要再 cart.js 的每一个 mutations 中都执行一次，所以如果 mutations 太多，这种方法就显得不是很合理，所以这里可以使用 Vuex 中的插件去实现，这样会显得更加合理一些。

• Vuex 的插件就是一个函数。
• 这个函数接收一个 store 的参数。

在这个函数里面，我们可以定义一个函数，让它在所有的 mutations 执行结束之后再去执行。

import Vue from 'vue'
import Vuex from 'vuex'
import products from './modules/products'
import cart from './modules/cart'

Vue.use(Vuex)

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

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